即使我不调用 setstate React 也会更新状态

Question

（反应 16.8.6）我有一个问题，当一个变量改变时，即使我没有调用任何 setState，它也会自动改变状态。在 handleInputChange 中，当我分配值时，它会自动更新状态 clientsData 和 editedClientsData 。我只想更新 editedClientsData。

代码如下：

1 - 设置状态（点击按钮时触发）：

getClients(calls) {
axios.all(calls)
    .then(responseArr => {
        let cleanedDate = []
        responseArr.map(el => {
            cleanedDate.push(el.data.data)
        })
        this.setState({
            clientsData: cleanedDate,
            editedClientsData: cleanedDate,
            loading: false
        })
        this.loadDataChart()
    });
}

2 - 加载输入字段

render(){
    return (...
        this.state.editedClientsData.map(this.renderInput)
    ...)
}

renderInput = (client, i) => {
    const { activeYear } = this.state
    return (<tr key={client.id}>
        <td>{client.name}</td>
        <td><Input
            type="number"
            name={client.id}
            id="exampleNumber"
            placeholder="number placeholder"
            value={client.chartData[activeYear].r}
            onChange={this.handleInputChange}
        /></td>
        <td>{client.chartData[activeYear].x}</td>
        <td>{client.chartData[activeYear].y}</td>
    </tr>
    )
}

handleInputChange(event) {
    let inputs = this.state.editedClientsData.slice();
    const { activeYear } = this.state
    for (let i in inputs) {
        if (inputs[i].id == event.target.name) {
            inputs[i].chartData[activeYear]['r'] = parseFloat(event.target.value)
            console.log(inputs)
            // this.setState({ editedClientsData: inputs })
            break;
        }
    }
}

我试过分配固定号码我试图保存为 const {clientsData} = this.state ，更新 editedClientsData 和 this.setState({clientsData})

所有这些测试都失败了。希望得到您的帮助，谢谢！

Answer 1

在 getClients 函数中，您将同一个数组 cleanedDate 分配给状态的两个属性（clientsData 和 editedClientsData）。

两个属性都指向同一个数组。所以编辑将反映到两个属性。现在，假设数组包含对象，那么使用 slice 复制数组也不起作用，因为两个不同的数组都包含对相同数据的引用。考虑以下示例：

var a = [{prop: 1}];
var b = a.slice();
var c = a.slice();
console.log(c == b); // false
b[0].prop = 2;
console.log(b[0].prop); // 2
console.log(c[0].prop); // also 2, because slice does shallow copy.

在这种情况下，您需要深度复制数据，因此不会复制引用。您可以为此使用 Lodash 实用程序或为此创建您自己的实用程序。

即使我不调用 setstate React 也会更新状态

A state being updated even if I don't call setstate React

javascript

reactjs