状态改变时如何更新数组中的键值？

Question

我正在使用 React.js 并且在渲染方法中我有 <Range/> 组件。我想要做的是能够更改值并相应地更新状态数组。这就是我所说的：

...
{
    this.state.tableData.map((i, k) => {
        return (
            <>
                <tr key={k}>
                    <td>
                        <div>
                            <Range
                                values={[i.s_rate]}
                                min={MIN}
                                max={MAX}
                                onChange={(values) => this.onSliderChangeS(values, k)}
    ...

所以我触发了 onSliderChangeS 函数，它将 s_rate 的新值作为来自用户的 values，它必须更新并显示我的新 this.state.tableData 因此。我正在尝试这样做：

onSliderChangeS = (values, key) => {
    this.setState({
        valuesS: values,
        tableData[key].s_rate: parseInt(values)
    })
}

但这行this.state.tableData[key].s_rate: parseInt(values)似乎根本不起作用。我该怎么做？

Answer 1

setState 采用具有 key/value 个条目的对象。 this.state.tableData[key].s_rate 本身不是您所在州的关键名称。看看这是否有帮助：

onSliderChangeS = (values, key) => {
    const newTableData = [...this.state.tableData]
    newTableData[key].s_rate = parseInt(values)

    this.setState({
        valuesS: values,
        tableData: newTableData
    })
}

另请注意@FaFa

指出的缺失逗号

状态改变时如何更新数组中的键值？

How to update key value inside array when state changes?

javascript

reactjs