Question

我有一个React应用，其中我需要将新的键值（值可以是数组）推送到状态键中。

this.state = {
    keyValue: {}
}

将其可视化是这样的：

keyValue:{'key1':[value1],'key2':[value2,value3]}

我该如何做出反应？我尝试过：

const newKeyvalue = Object.keys(state.keyValue).map((keyValues) => { return {...keyValue, key: value};}); this.setState({keyValue: newKeyvalue}); 但这不起作用

Answer 1

这是一个示例，该示例说明如何向状态中的对象动态添加新的键值对。

请参阅沙箱：https://codesandbox.io/s/create-arrays-of-n-length-and-editable-d9b3h

此外，我为您提供了一种修改现有的键值对以更新其自身数组的方法。您可以根据需要更改新值逻辑，在这种情况下，您可能想推送一个新对象，而不是生成长度为 N 的数组。

class App extends React.Component {
  state = {
    keyValue: {},
    newKey: "",
    newValue: "",
    edittingKey: {}
  };

  createNewKeyValuePair = () => {
    const { keyValue, newKey, newValue } = this.state;

    const newPair = { [newKey]: Array.from(Array(parseInt(newValue)).keys()) };

    this.setState(
      {
        keyValue: { ...keyValue, ...newPair },
        newKey: "",
        newValue: ""
      },
      () => console.log(this.state.keyValue)
    );
  };

  handleOnChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  handleOnClick = key => {
    const { keyValue } = this.state;
    this.setState({
      edittingKey: { [key]: keyValue[key] }
    });
  };

  handleEdit = e => {
    this.setState({
      edittingKey: {
        [e.target.name]: Array.from(Array(parseInt(e.target.value)).keys())
      }
    });
  };

  completeEdit = () => {
    const { keyValue, edittingKey } = this.state;
    this.setState(
      {
        edittingKey: {},
        keyValue: { ...keyValue, ...edittingKey }
      },
      () => console.log(this.state.keyValue)
    );
  };

  createKeyValuePairList = () => {
    const { keyValue, edittingKey } = this.state;

    const list = Object.entries(keyValue).map(([key, value]) => {
      if (Object.keys(edittingKey).includes(key)) {
        return (
          <div>
            <label>{key}</label>
            <input
              placeholder="change number"
              value={edittingKey[key].length}
              onChange={this.handleEdit}
              name={key}
            />
            <button onClick={this.completeEdit}>Complete</button>
          </div>
        );
      } else {
        return (
          <li>
            {key} : {value.length}
            <button onClick={() => this.handleOnClick(key)}>Edit</button>
          </li>
        );
      }
    });

    return (
      <div>
        {list.length > 0 ? (
          <div>
            Click to edit array number <ul>{list}</ul>
          </div>
        ) : (
          ""
        )}
      </div>
    );
  };

  render() {
    return (
      <div>
        <div>
          <label>KeyName</label>
          <input
            name="newKey"
            value={this.state.newKey}
            onChange={this.handleOnChange}
          />
        </div>
        <div>
          <label>Number of Items</label>
          <input
            name="newValue"
            value={this.state.newValue}
            onChange={this.handleOnChange}
          />
        </div>
        <button onClick={this.createNewKeyValuePair}>Add</button>
        <div>{this.createKeyValuePairList()}</div>
      </div>
    );
  }
}

Answer 2

keyValue是动态变量吗？他们尝试以下

this.setState({[keyValue]: newKeyvalue});

Answer 3

我正在这样使用

obj = []
obj.push({ value: i, label:data[i].api_keys_id })

结果：

[
  { value: 1, label: 154 },
  { value: 2, label: 545 }
]

如果您想动态更改键名，可以用[]换行，然后设置

obj = []
myKeyName="value"
obj.push({ [myKeyName]: i, label:data[i].api_keys_id })

Answer 4

您可以按照以下说明进行操作。

  

  const obj = {'keyValue':{'key1':[1],'key2':[2, 3]}}
  const newKeyValue = Object.assign({}, obj.keyValue, {"key3":[6,7], "key2": [...obj.keyValue.key2, 8]})
  console.log(newKeyValue);

在React中为状态分配键值

4 个答案: