foreach 循环在使用状态钩子 reactjs 上不起作用答案

【问题标题】：foreach loop not working on use state hook reactjsforeach 循环在使用状态钩子 reactjs 上不起作用
【发布时间】：2020-12-14 12:15:51
【问题描述】：

单击按钮时，我正在尝试将 forEach 循环用于我的使用状态钩子，该钩子最初是一个数组。

我的钩子是：

const [regrowsData, setRegrowsData] = useState([])

我的按钮代码是：

<Button variant="contained" color="primary" onClick={() => regenrateRows()}>Add Row</Button>

改变useSate钩子数据的函数：

const regenrateRows = () => {
        var newArr = regrowsData;
        newArr.push('newvalue');
        setRegrowsData(newArr);
    }

我想要 forEach 重新增长状态数组的函数。

var getRows = () => {        
        
            regrowsData.forEach((row) => {
               
                alert(row)
            })
       
    }

问题在于状态变化，没有出现警告消息。

【问题讨论】：

你能告诉我们getRows函数在哪里被调用
尝试使用map() 而不是 forEach，它总是对我有用
return ( {getColumns()} {getRows()} )

标签： reactjs react-hooks use-state

【解决方案1】：

这可能是因为您使用的是可变数据。尝试将您的 regenarateRowsfunction 更改为：

const regenrateRows = () => {
        setRegrowsData([...regrowsData, 'newvalue']);
    }

【讨论】：

如果我只想更新状态五次..？
我不明白这个问题..您想限制添加行点击次数吗？如果是这样，您可能需要另一个状态来计算状态更改的次数或在调用 setRegrowsData 之前检查 regrowsData.length。顺便说一句，regenrateRows 是一个错字。

【解决方案2】：

您正在更新对状态的相同引用，这就是 react 无法找到更改的原因。

这样试试

const regenrateRows = () => {
     regrowsData.push('newvalue');
     setRegrowsData([...regrowsData]);
}

【讨论】：