将选定的多个单选按钮值和 uniqueId 添加到数组

Question

我正在映射多个单选按钮（组）选项，当用户单击单选按钮时，希望将选定的值和 uniqueId 添加到数组中。使用我当前的代码，我可以获得当前单击但无法添加到数组的值。{result !== null && result.length > 0 ? (    <div>      {result.map(item => {        const label = item.question        const listOptions = item.options.map(item => {          return (            <Radio              name={item.uniqueId}              inline              value={item.uniqueId}              key={item.uniqueId}              className="radio-options"              checked={item.checked}              onChange={e => {                this.handleChange(label, uniqueId);              }}            >              {item.options}            </Radio>          );        });        return (          <div className="radio-options-overview">            <p>{label}</p>            {listOptions}          </div>        );      })}handleChange = (label, uniqueId) => {  console.log(label, uniqueId);  let addToArray = [];  this.setState({ selectedItems: addToArray})};数组看起来像这样，[  { "label": "ageRange", "uniquId": 2 },  { "label": "smoker", "uniquId": 1 },  { "label": "exOption", "uniquId": 3 }]

Answer 1

你快到了。@Clarity 提供了很好的解决方案。如果您想替换现有值并用新值替换它

尝试这个

handleChange = (label, uniqueId) => {

    const { selectedItems } = this.state

    // Find items that already exists in array

    const findExistingItem = selectedItems.find((item) => {

      return item.uniqueId === uniqueId;

    })

    if(findExistingItem) {

      // Remove found Item 

      selectedItems.splice(findExistingItem);

      // set the state with new values/object

      this.setState(state => ({

        selectedItems: [...state.selectedItems, {

          label, uniqueId

        }]

      }))

    } else {

      // if new Item is being added

      this.setState(state => ({

        selectedItems: [...state.selectedItems, {

          label, uniqueId

        }]

      }))

    }

};

Answer 2

你可以这样做：

handleChange = (label, uniqueId) => {

  this.setState(state => ({ selectedItems: [...state.selectedItems, uniqueId]}));

};

通过使用数组展开和函数形式，setState确保您不会直接改变状态并将项目添加到最新状态。

如果你想用一label: uniqueId对添加一个对象，你可以这样做：

handleChange = (label, uniqueId) => {

  this.setState(state => ({

    selectedItems: [...state.selectedItems, {

      [label]: uniqueId

    }]

  }));

};

编辑：如果要覆盖具有相同标签的项目，最简单的方法是将它们存储为对象而不是数组，因此具有相同标签的项目将覆盖现有项目：

handleChange = (label, uniqueId) => {

    this.setState(state => {

      return { selectedItems: { ...state.selectedItems, [label]: uniqueId } };

    });

  };

Answer 3

老实说，我不明白，你想做什么，但如果你需要在数组中添加对象（或其他东西），你可以使用.push()方法。例如：

let addToArray = [];

let test = {"label": "ageRange", "uniquId": 2};

addToArray.push(test);

console.log(addToArray); //[{label: "ageRange", uniquId: 2}]