React.map 不在 state 上重新渲染功能组件的变化

Question

const [fullProductCostingDataState, setFullProductCostingDataState] = useState([]);

// update of state done here

{fullProductCostingDataState.map((item, index) => {
     return (
         <p key={index}>{item["materialName"]}</p>
     )
})} 

抱歉，我知道这可能是一个愚蠢的问题，但我知道.map function 只呈现一次，然后即使 state 更改数据，但我不需要重新映射到列表页面state 中的项目。 我在网上找到的所有回复都提到了使用渲染（），但我使用的是功能组件，所以没有渲染，我可以使用钩子来强制它更新还是 is.map 完全错误地使用这个。

function ItemRow(props) {
    let data = props.fullData;
    let newItem = { "id": props.id, "materialName": props.name, "value": totalPrice }
    data.push(newItem);
    props.setFullData(data);
}

这是我如何更新 state 的淡化版本（完整版本有很多 if 语句来检查各种内容并删除重复项），猜我正在变异它？

Answer 1

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>
     )
})} 

当 state 更改时，您的问题将得到解决，因为 useEffect 重新渲染页面。 现在您只需更新 state。

Answer 2

感谢大家在这里的帮助解决了它。

更改了let data = props.fullData; let data = [...props.fullData]; 然后在使用数据变量调用集合 state function 之前编辑数据变量:)

感谢大家，