javascript - 如果不存在，则将输入值添加到数组

Question

我在我的 React 应用程序中呈现一个 Array 并且对于每个 Array 我都有一个 input 元素。 此元素从数组条目中获取 name ID，并且可以输入一个值。

我有一个handleChange() 函数，它获取ID 和输入值。

这个数据应该被添加到一个数组中，我想将它保存到我的State中。

稍后，我为每个数组条目创建了一个提交按钮，我必须在其中将输入值发送到 API 端点。

constructor(props: Props) {
    super(props);
    this.state = {
        sendTransferObj: []
    };
    this.handleChange = this.handleChange.bind(this);
}

...

handleChange(transId: string, event: React.ChangeEvent<HTMLInputElement>) {
    console.log(transId, event.target.value); // returns => '123', '1'

    let inputObject = [{ id: transId, value: event.target.value }]
    let arrayForState = [];

    const index = inputObject.findIndex(inputObject => inputObject.id != transId)

    if (index === -1) {
        arrayForState.push(inputObject);
    } else {
        console.log("object already exists")
    }

    console.log(arrayForState)

    this.setState({
        ...this.state,
        sendTransferObj: arrayForState
    }); // error!
}

...

<Form.Control as="input" name={trans.id} onChange={this.handleChange.bind(this, trans.id)} />

我的问题目前在我的 handleChange() 中，输入值被保存到我的 arrayForObject 中用于一个输入，但是如果我输入第二个输入元素 a值，它会被覆盖。

当我稍后想要执行 setState() 来保存这个数组时，我也会遇到各种错误。

这是我用作引用的整个组件(使用 Redux 从我的状态获取我渲染的数组):https://codesandbox.io/s/practical-ptolemy-69zbu?fontsize=14&theme=dark

Answer 1

您需要将 inputObject 附加到当前状态的 sendTransferObj 数组，而不是将其附加到新的空数组(这会导致覆盖)。您可以使用 spread syntax 执行此操作

handleChange(transId: string, event: React.ChangeEvent<HTMLInputElement>) {
    let inputObject = [{ id: transId, value: event.target.value }]
    const index = inputObject.findIndex(inputObject => inputObject.id != transId)

    this.setState({
        ...this.state,
        sendTransferObj: index === -1 ? [
          ...this.state.sendTransferObj,
          inputObject
        ] : this.state.sendTransferObj
    });
}

不过，这不会在找到 inputObject 时更新字段。我建议将值存储在一个对象中，并将 ID 作为键(并在请求 API 时将其格式化为所需的格式)。这样，您就不必遍历数组来找到匹配的对象。

constructor(props: Props) {
    super(props);
    this.state = {
        sendTransferObj: {}
    };
    this.handleChange = this.handleChange.bind(this);
}

...

handleChange(transId: string, event: React.ChangeEvent<HTMLInputElement>) {
      this.setState({
          ...this.state,
          sendTransferObj: {
            ...sendTransferObj,
            [transId]: event.target.value
          }
      }); 
  }