即使我不調用 setstate React，也會更新 state

Question

（React 16.8.6）我的問題是，當變量更改時，即使我不調用任何 setState，它也會自動更改 state。 在我賦值的handleInputChange中，它會自動更新狀態clientsData和editedClientsData。 我只想更新editedClientsData。

這是代碼：

1 - 設置 state（點擊按鈕觸發）：

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 function 中，您為cleanedDate的兩個道具（ clientsData和editedClientsData ）分配了同一個數組cleanedDate。

這兩個屬性都指向同一個數組。 因此編輯將反映到這兩個屬性。 現在，假設數組包含對象，因此使用slice復制數組也將不起作用，因為不同的 arrays 都包含對相同數據的引用。 考慮下面的例子：

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 實用程序，也可以為此創建自己的實用程序。