javascript - 以 react 形式更新嵌套的json值

我的json

this.state = {
            name: '',
            subCatagory: [{ name: '', price: '', customize: [] }],
        };

我的地图功能

 {this.state.subCatagory.map((subCatagory, idx) => (
                        <div className="subCatagory" key={idx}>
                            <input
                                type="text"
                                placeholder={`Enter Dish  #${idx + 1} name`}
                                value={subCatagory.name}
                                onChange={this.handlesubCatagoryNameChange(idx)}
                            />
                            <input
                                type="number"
                                placeholder={`subCatagory #${idx + 1} price`}
                                value={subCatagory.price}
                                onChange={this.handlesubCatagoryPriceChange(idx)}
                            />
                            <button
                                type="button"
                                onClick={this.handleRemovesubCatagory(idx)}
                                className="small"
                            >
                                Delete
                            </button>
                            <button type="button" onClick={this.addNewCust(idx)} className="small">
                                is cust availble?
                            </button>
                            {subCatagory.customize.map((gj, f) => (
                                <div key={f}>
                                    <input
                                        type="text"
                                        placeholder={`subCatagory #${f + 1} price`}
                                        value={gj.name}
                                        key={gj.key}
                                        onChange={this._pushvaluesto_customize(f)}
                                    />
                                </div>
                            ))}
                        </div>
                    ))}

我有两个.map函数，一个用于subCatagory，然后另一个用于custom。，上面的代码将执行此操作

当我单击onClick={this.handleAddsubCatagory}时，新数组将以name: '',subCatagory: [{ name: '', price: '', customize: [] }],的形式推送到this.state

在subCatagory onChange={this.handlesubCatagoryNameChange(idx)}中的每个名称和价格上的每个文本更改上，然后在onChange={this.handlesubCatagoryPriceChange(idx)}中，它将更新subCatagory: [{ name: '', price: '', customize: [] }], json。，但是我不知道如何更新嵌套在subCatagory中的custom的字段值。

我的代码用于在subCatagory中更新

handlesubCatagoryNameChange = idx => evt => {
        const subCatagory = this.state.subCatagory.map((subCatagory, sidx) => {
            if (idx !== sidx) return subCatagory;
            return { ...subCatagory, name: evt.target.value };
        });

        this.setState({ subCatagory: subCatagory });
    };

如何在反应形式中使用地图更新嵌套的json

我的要旨https://gist.github.com/gjgit/78bde9415b889331c9d4bfa52e4945ad

最佳答案

如果已经可以访问元素的索引，则可以直接更新元素值，如下所示，map函数将不必要地遍历数组。
  这里的custIdx是定制数组元素的索引，该元素需要更新

handlesubCatagoryChange = (idx, property, custIdx) => evt => {
    const subCatagory = this.state.subCatagory
    property != 'customize'? subCategory[idx][property] = evt.target.value : subCategory[idx][property][custIdx] = evt.target.value

    this.setState({ subCatagory: subCatagory });
};