Цикл foreach не работает при использовании хука состояния
При нажатии кнопки я пытаюсь использовать цикл 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)
})
}
Проблема заключается в изменении состояния, не появляется предупреждающее сообщение.
Попробуйте использовать map() вместо forEach, у меня всегда работает
return ( <Paper height = "2"> <Button variant = "contained" color = "primary" onClick = {() => regenrateRows()}>Добавить строку</Button> <Table style = {{ overflowX: "scroll ", display: "block" }}> <TableHead> <TableRow> {getColumns()} </TableRow> </TableHead> <TableBody> {getRows()} </TableBody> </Table> </Paper> )
Ответы 2
Вероятно, это потому, что вы используете изменяемые данные.
Попробуйте изменить функцию regenarateRows на это:
const regenrateRows = () => {
setRegrowsData([...regrowsData, 'newvalue']);
}
если я хочу обновить состояние только пять раз ..?
Я не понял вопроса... вы хотите ограничить количество кликов по добавлению строк? Если это так, вам, вероятно, потребуется другое состояние для подсчета времени изменения состояния или проверки regrowsData.length перед вызовом setRegrowsData. Кстати, regenrateRows — это опечатка.
Вы обновляете ту же ссылку на состояние, поэтому реакция не может найти изменения.
Попробуйте так
const regenrateRows = () => {
regrowsData.push('newvalue');
setRegrowsData([...regrowsData]);
}
не могли бы вы показать нам, где вызывается функция
getRows