通过 React 中的输入元素更新对象中的嵌套状态

Posted 2023-03-05

【中文标题】通过 React 中的输入元素更新对象中的嵌套状态

【英文标题】：Updating nested state in objects through an input element in React

【发布时间】：2017-09-30 18:12:15

【问题描述】：

我正在创建一个允许更新订单的表单。输入字段必须填充我渲染的每个对象的当前状态，并且我希望能够编辑输入字段。我已将我的代码简化为一个输入字段，并相信我能够使用以下代码完成我正在尝试的大部分工作 --

class EditOrderForm extends React.Component 
  ...

  handleChange(e, key) 
    const order = this.props.orders[key];
    const updatedOrder = 
      ...order,
      [e.target.name]: e.target.value
    
    this.props.updateOrder(key, updatedOrder);
  

  renderEditOrderForm(key) 
    const order = this.props.orders[key]
    return (
      <div key=key>
        <form >
          <input type="text" name="name" value=order.data.name placeholder="order name" onChange=(e) => this.handleChange(e, key) />
          ...
        </form>
      </div>
    )
  

  render() 
    return (
      <div>
        <h2>Edit Orders</h2>
        
          Object.keys(this.props.orders).map(this.renderEditOrderForm)
        
      </div>
    )
  


*************Parent Component*************

class AppComponent extends React.Component 
import EditOrderForm from './EditOrderForm';
...

  updateOrder(key, updatedOrder) 
    const orders = [...this.state.orders]
    orders[key] = updatedOrder;
    this.setState( orders: orders );
  

...

在父组件级别设置的状态是一个对象数组，我传递给renderEditOrderForm() 的对象的数据结构具有以下结构--

 
  data: Object,
  meta: Object,
  __proto__: Object

data: Object 包含我要更改的键值对，在这种情况下，键 name 嵌套在 data: Object（上图）下，我想在更新后将其放回数组中/编辑。我可以稍微更新订单的名称，但是当我尝试更新它时（例如，输入“x”），对象现在具有这种结构 --

 
  data: Object,
  meta: Object,
  name: "John Smithx"
  __proto__: Object

我可以直觉[e.target.name]: e.target.value 可能是罪魁祸首，但是我完全不知道应该如何访问data: Object 中的嵌套键name——我已经尝试过e.target .data.name，但是这给了我undefined 并尝试了各种其他组合。不使用 Redux（不幸的是，由于时间限制没有时间学习），有谁知道我如何访问/定位键 name 以更新嵌套在 data: Object 中的？

【参考方案1】：

您需要更改字段order.data.name，但您的代码只是向order 对象添加一个新字段。替换

handleChange(e, key) 
    const order = this.props.orders[key];
    const updatedOrder = 
      ...order,
      [e.target.name]: e.target.value
    
    this.props.updateOrder(key, updatedOrder);

与

handleChange(e, key) 
    const order = this.props.orders[key];
    let updatedOrder =  ...order ;
    updatedOrder.data[e.target.name] = e.target.value;
    // or if you have only 1 field called name, you can use updatedOrder.data.name = e.target.value;
    this.props.updateOrder(key, updatedOrder);