首页 文章

React链式setState打破渲染

提问于
浏览 次
0

我正在尝试创建一个RadioInput组件，但是当我添加一个回调来设置父级内部的状态时，按钮不会保持单击状态 .

在RadioInput组件渲染功能的内部，我正在创建内部按钮，如下所示：

this.props.buttons.map( (button) => {
    return (
        <div ...>
            <Button clickedDown={this.state.selectedButton === button} clickAction={() => this.radioSelected(button)}.../>
        </div>
    )
}

然后，无线电选择功能设置内部无线电输入状态，使单击的按钮成为选定按钮，并调用传递给子节点的功能，以便将选项的值提供给父节点

radioSelected = (button) => {
    if (this.state.selectedButton !== button) {
        this.setState({selectedButton: button}, () => {
            this.props.clickAction(this.state.selectedButton);
        }
    }
}

RadioInput在父级内部声明如下：

render () {
    const buttonList = [
        { color:'green', text:'Green', id: 1 },
        { color:'blue', text:'Blue', id: 2 },
        { color:'purple', text:'Purple', id: 3 }
    ];
    return (
        <RadioInput buttons={buttonList} clickAction={this.radioAction}/>
    )
}

由RadioInput的内部radioSelected函数调用的radioAction函数如下所示：

radioAction = (button) => {
    this.setState({
        team: button.color
    });
}

如果从无线电输入中的 setState 中删除 this.props.clickAction(this.state.selectedButton); ，它将正常工作 . 如果我正确地删除了父母 radioAction() 内的 setState . 为什么链接的setStates会导致错误，例如阻止 clickedDown={this.state.selectedButton === button} 不被重新评估？

任何帮助表示赞赏！

reactjs

2 回答

  • 1

    Tl;博士;

    x0 = [{a: 'red'}];
x1 = [{a: 'red'}];
console.log(x0[0] === x1[0]); // false

    将 buttonList （ const buttonList = ... ）的初始化从 render 函数移动到构造函数或在每个渲染上不更改数组的任何其他位置 .

    解释

    在您的父级中，每次调用 render 时都会重新初始化 buttonList . 因此，每次调用父级的 render 之后，您都会有一个不同的 buttonList ，因为它每次都是一个新创建的对象 .

    现在，您的 radioAction 函数在parent上调用 setState ，它调用 render 并有效地将 buttonList 的所有项目更改为新的项目数组 . 肯定 this.state.selectedButton 不等于它们中的任何一个，因为它是前一个数组中的一个项目 .

    回复于
  • 0

    您的 clickAction 没有收到参数：

    clickAction={() => this.radioSelected(button)}

    它打破了，因为你用一个参数调用它同时 clickAction prop没有收到你的参数，所以它只是没有收到 this.state.selectedButton

    this.props.clickAction(this.state.selectedButton);

    所以，它应该是：

    clickAction={(button) => this.radioSelected(button)}
    回复于

相关问题