Question

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

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可能是罪魁祸首，但是我完全不知道我应该如何访问name中的嵌套密钥data: Object - 我已经尝试过e.target.data.name，但这给了我undefined并尝试了各种其他组合。不使用Redux（遗憾的是由于时间限制没有时间学习），有没有人知道我如何访问/定位密钥name以更新嵌套在data: Object？

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

通过React

1 个答案: