javascript - 如何使这个 setState 函数非递归

Question

我正在学习 React 并且处于非常早期的阶段。我试图将一个对象添加到数组中，从另一个组件到另一个组件。我能够使用 props 实现这一点，但现在当我尝试在 this.state 中设置它时，setState 再次调用渲染函数，从而再次触发该函数。我能够使用一个按钮解决这个问题，但我不想这样做。有更好的方法吗？

getData() {
    if (this.props.data.employeeData !== undefined) {
        if (this.props.isNewEmployee === "true") {
            this.setState({
                isNewEmployee: "true",
            });
            setTimeout(() => {
                if (this.state.isNewEmployee === "true") {
                    console.log(this.props.data.employeeData.firstName);
                    var joined = this.state.EmployeesList.concat(this.props.data.employeeData);
                    this.setState({
                        EmployeesList: joined,
                        isNewEmployee: "false",
                    })
                }
                else {
                    console.log("Don't know what's happening anymore");
                }
            }, 100);
        }
        else {
            console.log("No new employee added");
        }
    }
    else {
        console.log("Something went wrong");
    }
}

render() {
    return (
        <div>
            {this.getData()}
            {this.renderTable()}
            {this.renderFloatingActionButton()}
        </div>
    )
}

Answer 1

如果 props 的目的是将新数据添加到表中，我会在这些行中做一些事情。

componentWillReceiveProps(nextProps) {
    if (this.props.data.employeeData && nextProps.isNewEmployee !== this.props.isNewEmployee) {
      console.log(this.props.data.employeeData.firstName);
      var joined = this.state.EmployeesList.concat(this.props.data.employeeData);
      this.setState({
        EmployeesList: joined,
        isNewEmployee: "false",
      });
    } else {
      console.log("No new employee added");
    }
}
render() {
    return (
        <div>
            {this.renderTable()}
            {this.renderFloatingActionButton()}
        </div>
    )
}