javascript - React - 如何循环和更新对象模型中的值？

Question

我有一个对象模型模式如下

   this.state = {
        data: {
            audi: {
                 engine: '2.5',
                 gearbox: 'auto',
                 fuel: 'petrol'
             },
             bmw: {
                 engine: '3.0',
                 gearbox: 'auto',
                 fuel: 'petrol'
             },
             merc: {
                 engine: '6.3',
                 gearbox: 'manual',
                 fuel: 'petrol'
             }
         }
    }

我的目标是:

循环数据并渲染

将 HTML 中的值更改映射到
this.state.data 对象中的对应键

我没有使用数组，因为发布它时它必须看起来像上面的对象模式。
目前我正在尝试这样做:

//To render
Object.entries(this.state.data).map((x,index) =>
    <p>x.key</p> //Trying to reach 'audi' with x.key

    // Render each KPV in object
    {x.key}: <input key={index} onChange={this.handleChange} value={x.value}/>
)

然后更新同一状态模型中的对应值:

// To update the state model with changed values
setData = (key, val) => {
    this.setState(state => ({
        data: {
            ...state.data,
            obj: { [key]: val },
            //Don't know how to map to state properly!
        }
    }));
};

// Handle input change
handleChange = key => e => {
    this.setData(key, e.target.value);
};

请任何人都可以就这种方法给我建议，非常感谢:)

Answer 1

首先，您需要正确渲染，这意味着循环遍历所有键(汽车制造商)，然后遍历所有属性/值对。您可以使用解构数组使这更容易

Object.entries(someObject).map( ([key,value]) => .... )

继承人渲染:

render() {
    return Object.entries(this.state.data).map(([maker, props]) => {
      return (
        <div>
          <h2>{maker}</h2>
          {Object.entries(props).map(([key, value], index) => {
            return (
              <div>
                {key}:{" "}
                <input
                  key={index}
                  onChange={this.handleChange(maker, key)}
                  defaultValue={value}
                />
              </div>
            );
          })}
        </div>
      );
    });
  }

你会注意到我改变了你的 handleChange传递汽车制造商和正在编辑的属性的方法 - 这可以传递给 setData :

// To update the state model with changed values
  setData = (maker, key, val) => {
    this.setState((state) => ({
      data: {
        ...state.data,
        [maker]: {
          ...state.data[maker],
          [key]: val
        }
        //Don't know how to map to state properly! Now you do!
      }
    }));
  };

  // Handle input change
  handleChange = (maker, key) => (e) => {
    this.setData(maker, key, e.target.value);
  };

现场工作示例: https://codesandbox.io/s/react-playground-forked-dw9sg