Soy bastante nuevo en reaccionar, y estoy trabajando en un componente donde estoy calculando los porcentajes de valores en el estado de uso a continuación, por ejemplo:
const [data, setData] = useState({ five: 5, four: 4, three: 3, two: 2, one: 1 }); const [percentage, setPercentage] = useState(0); const fields = [ { name: "five", value: data.five }, { name: "four", value: data.four }, { name: "three", value: data.three }, { name: "two", value: data.two }, { name: "one", value: data.one } ]; useEffect(() => { const per1 = ((data.one) / (data.five + data.four + data.three + data.two + data.one)) * 100; setPercentage(per1); }, [data]);Tengo constantes que creé para calcular la cantidad de calificaciones para cada tipo de calificación, por ejemplo: el número de cinco estrellas, cuatro estrellas, etc.:
const numRating5 = product.reviews.filter((x) => x.rating === 5); const numRating4 = product.reviews.filter((x) => x.rating === 4); const numRating3 = product.reviews.filter((x) => x.rating === 3); const numRating2 = product.reviews.filter((x) => x.rating === 2); const numRating1 = product.reviews.filter((x) => x.rating === 1);¿Hay alguna manera de poner numRating5, numRating4,.... en sus respectivas posiciones (cinco: 5, cuatro: 4,...) en el estado de uso. Realmente agradecería cualquier ayuda u orientación sobre esto. ¡Gracias!
Puedes intentar algo como esto:
const product = { reviews: [ {rating: 1}, {rating: 2}, {rating: 3}, {rating: 4}, {rating: 5}, ] }; const getNumRating = (num) => product.reviews.filter((x) => x.rating === num).length; const numRating5 = getNumRating(5); const numRating4 = getNumRating(4); const numRating3 = getNumRating(3); const numRating2 = getNumRating(2); const numRating1 = getNumRating(1); const useState = React.useState; const useEffect = React.useEffect; function App() { const [data, setData] = useState({ five: numRating5, four: numRating4, three: numRating3, two: numRating2, one: numRating1 }); const [percentage, setPercentage] = useState(0); useEffect(() => { const per1 = ( data.one / (data.five + data.four + data.three + data.two + data.one) ) * 100; setPercentage(per1); }, [data]); return ( <div> Hello! Percentage = {percentage} </div> ); } ReactDOM.render(<App/>, document.getElementById("root")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root"></div>puede actualizar los datos usando setData y pasar el objeto
setData ({ five : numRating5, four : numRating4, three : numRating3, two : numRating2, one : numRating1, });consulte: https://reactjs.org/docs/hooks-state.html para obtener más información