Javascript 即使我没有'；不要调用设置状态

（第16.8.6节） 我的问题是，当一个变量改变时，即使我不调用任何setState，它也会自动改变状态。在handleInputChange中，当我赋值时，它会自动更新状态clientsData和editedClientsData。我只想更新editedClientsData

代码如下：

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

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;
        }
    }
}

render（）{
返回（。。。
this.state.editedClientsData.map（this.renderInput）
...)
}
renderInput=（客户端，i）=>{
const{activeYear}=this.state
返回(
{client.name}
{client.chartData[activeYear].x}
{client.chartData[activeYear].y}
)
}
handleInputChange（事件）{
让输入=this.state.editedClientsData.slice（）；
const{activeYear}=this.state
for（让我输入）{
if（输入[i].id==event.target.name）{
输入[i].chartData[activeYear]['r']=parseFloat（event.target.value）
console.log（输入）
//this.setState（{editedClientsData:inputs}）
打破
}
}
}

我试着分配一个固定的号码 我试图保存为const{clientsData}=this.state，更新editedClientsData和this.setState（{clientsData}）

---

所有这些测试都失败了。希望在你的帮助下，谢谢你

在

getClients

函数中，将同一数组

cleanedDate

分配给状态的两个props（

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实用程序，也可以创建自己的实用程序。

your

for。。在

循环中没有意义，您是否试图修改数组中的每个值？实际上这是最后一次测试。。第一个版本没有循环，只有

let{editedClientsData}=this.state

const{clientsData，activeYear}=this.state

editedClientsData[index].chartData[activeYear][data]=parseFloat（event.target.value）

，但这段代码也失败了。。我得到了同样的错误结果。是的，因为如果您使用索引，那么您将尝试更新数组中的所有项。那么，您如何知道哪些项目需要编辑呢？谢谢Salim！你的回答解决了我的问题。最后的解决方案是这个，使用Lodash

getClients（calls）{axios.all（calls）.然后（responseArr=>{let cleanedDate=[]responseArr.map（el=>{cleanedDate.push（el.data.data）}）this.setState（{clientsData cleanedDate，editedClientsData:u.cloneDeep（cleanedDate），load:false}）this.loadDataChart（）}）；}

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.