const [fullProductCostingDataState, setFullProductCostingDataState] = useState([]); // update of state done here {fullProductCostingDataState.map((item, index) => { return ( <p key={index}>{item["materialName"]}</p> ) })}Lo siento, sé que esta es una pregunta potencialmente estúpida, pero sé que la función .map solo se representa una vez y luego, incluso si el estado cambia, los datos no se vuelven a asignar a la página, pero ¿cómo resuelvo esto? artículos en el estado. Todas las respuestas que encontré en línea mencionan el uso de render() pero estoy usando un componente funcional, así que no tengo render, ¿puedo usar ganchos para forzarlo a actualizar o es .map completamente incorrecto para usar para esto?
function ItemRow(props) { let data = props.fullData; let newItem = { "id": props.id, "materialName": props.name, "value": totalPrice } data.push(newItem); props.setFullData(data); }Esa es una versión diluida de cómo estoy actualizando el estado (la versión completa tiene muchas declaraciones if para verificar varias cosas y eliminar duplicados), ¿supongo que lo estoy mutando?
const [fullProductCostingDataState, setFullProductCostingDataState] = useState([]); // update of state done here useEffect(()=>{},[fullProductCostingDataState]) // this will solve your issue {fullProductCostingDataState?.map((item, index) => { return ( <p key={index}>{item["materialName"]}</p> ) })}Su problema se resolverá cuando useEffect vuelva a renderizar la página cuando se cambie el estado. Ahora solo tienes que actualizar el estado.
Lo resolví gracias a la ayuda de todos aquí.
Cambiado let data = props.fullData; let data = [...props.fullData]; luego editó la variable de datos antes de llamar a la función de estado establecido usando la variable de datos :)
Gracias a todos,