Question

我有一个具有动态行的react表单，但是我停留在第76行（演示：https://codesandbox.io/s/pw58j0vzoq），不确定该如何更新行中的值

class App extends React.Component {
  state = {
    acceptedValues: [
      {
        id: 1,
        _arguments: ["Samsung", "xiaomi"]
      },
      {
        id: 2,
        _arguments: ["OR", "AND"]
      }
    ]
  };

  handleChange = (name, index, argumentIndex) => e => {
    const { acceptedValues } = this.state;
    if (name === "_arguments") {
      updatedState = acceptedValues.map((o, i) => {
        if (i === index) {
          return {
            ...o,
            _arguments: o._arguments.map((o2, index2) => {
              if (index2 === argumentIndex) {
                //what to do here?
              }
              return o;
            })
          };
        }
        return o;
      });
      this.setState({
        acceptedValues: updatedState
      });
    }
  };

  render() {
    const { acceptedValues } = this.state;
    return (
      <div>
        {acceptedValues.map(({ operator, _arguments }, index) => (
          <div style={{ marginBottom: 20 }}>

            <div>
              {_arguments.map((val, argumentIndex) => (
                <div>
                  <input
                    onChange={this.handleChange(
                      "_arguments",
                      index,
                      argumentIndex
                    )}
                    id="_arguments"
                    type="text"
                    value={val}
                  />
                  <button onClick={this.removeArgument(index, argumentIndex)}>
                    -
                  </button>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    );
  }
}

我能够导航到正确的数组，但一直坚持如何更新数组中的值，我的handleChange函数中有2个索引。

Answer 1

您正在将一个数组映射到另一个数组，因此您应该选择要返回的字符串，如下所示：

_arguments: o._arguments.map(
    (o2, index2) => {
        if (index2 === argumentIndex) return e.target.value
        return o2
    }
)

或更干净的方式：

_arguments: o._arguments.map(
    (o2, index2) => index2 === argumentIndex ? e.target.value : o2
)

使用地图和索引es6更新嵌套数组的值

1 个答案: