使用 React 钩子更新动态状态的方法是什么？

Question

我正在尝试将我的代码更新为 React Hooks。我的函数在响应后更新异步函数内的数据。我尝试通过 React Hooks 做类似的解决方案，但它并没有真正起作用。为什么？有什么方法可以做到这一点？

这是我的更新功能：

updateData = (id, itemAttributes, property) => {
let prop = this.state[property];
let index = prop.rows.findIndex(x => x.eventID === id);
if (index === -1) {
return null
} else
this.setState({
[property]: {
columns: prop.columns,
rows: [
...prop.rows.slice(0,index),
Object.assign({}, prop.rows[index], itemAttributes),
...prop.rows.slice(index+1)
]
}
});
}

这就是我获取数据和使用 updateData 函数的方式：

this.state.data.rows.forEach((elem,index) => {
setTimeout(async () => {
const row = await axios.get(url);
const elemInfo = {
eventRegistrants: row.data.numberOfRegistrants,
eventParticipants: row.data.numberOfParticipants
}
this.updateData(
elem.eventID, 
elemInfo,
'data'
)
}, index * 1000)
})

编辑

这是我目前使用 React Hooks 的不起作用的解决方案：

const updateData = (id, itemAttributes) => {
let index = data.rows.findIndex(x => x.eventID === id);
if (index === -1) {
console.log('error');
} else
setData({
columns: data.columns,
rows: [
...data.rows.slice(0,index),
Object.assign({}, data.rows[index], itemAttributes),
...data.rows.slice(index+1)
]
});
}

Answer 1

尝试使用setState的函数形式：

const updateData = (id, itemAttributes) => {
setData(currData => {
const index = currData.rows.findIndex(x => x.eventID === id);
if (index === -1) {
console.log('error');
} else {
return {
...currData,
rows: [
...data.rows.slice(0, index),
Object.assign({}, data.rows[index], itemAttributes),
...data.rows.slice(index + 1)
]
}
}
});
}

另一种方法是使用map设置状态，这样更简洁：

const updateData1 = (id, itemAttributes) => {
setData(currData => {
return {
...currData,
rows: currData.rows.map(row => {
if (row.eventID === id) {
return {
...row,
itemAttributes
}
}
return row
})
}
});
}