Question

我有一个父组件，它在数组上映射并将props向下传递给子组件。

在子组件（在下面共享）中，我为用户提供了一些标记字体真棒图标（即复选框）的选项。每次用户选中一个框时，我都会创建一个响应对象，然后将其添加到一个数组中，然后将其发送到后端。

但是，每当用户单击时，状态数组都会重置并添加唯一选择的对象。先前添加的对象将被覆盖。

this.state = {
      outputArray: [],
      outputObject: {}
    }

 render () {
   return (
     renderOptions (outerArray) {
       if (outerArray.length) {
         return (
           <div>
             {outerArray.map((outerElement, i) => {
               return outerElement.map(item => (
                 <div className="Box" key={i}>
                <FontAwesomeIcon icon={faCheckCircle} 
                 className="checkIconStyling" onClick={() => this.collectUserFeedback(this.props.param, item.param1, item)} />
                <div>{outerElement.param3}</div>
                <FontAwesomeIcon icon={faAngleDoubleRight} className="chevronIconStyling"  />
                <div>{item}</div>
                <FontAwesomeIcon icon={faBug} className="bugIconStyling" />
              </div>
            ))
          })}
        </div>
      )
    }
  }
 )
}

这是用户每次按下图标时都会调用的功能：

  collectUserFeedback (item1, item2, item3) {
    let result = {};
    result[item2] = item3;
    this.setState({
      outputObject: {
        'some_key': item1,
        'some_other_key': result
      }
    }, () => {
      this.setState({
        outputArray: [...this.state.outputArray, this.state.outputObject]
      }, () => {
        // should add multiple objects to this array:
        console.log(this.state.outputArray);
      });
    });
  }

Answer 1

您可以简化逻辑，如下所示：

collectUserFeedback(item1, item2, item3)  {
  this.setState (
    (state, props) => ({
      outputArray: [
        ...state.outputArray,
        {
          'some_key': item1,
          'some_other_key': {[item2] : item3},
        },
      ],
    }),
    () => {
      // should add multiple objects to this array:
      console.log (this.state.outerArray);
    }
  );
}

无法将多个对象添加到我的状态数组

1 个答案: