为什么一个组件的多个实例共享同一个状态？

Question

我正在构建一个待办事项列表，其中一项功能是在单击 "completed" 文本时显示已完成任务的列表，并在再次单击时隐藏该列表。但是，我无法执行第一步 - 保存列表状态，无论是显示还是隐藏。

这些 "CompletedRow" 组件中有几个（用于不同类别的任务），虽然单击文本确实成功切换了状态，但似乎所有这些 "CompletedRow" 组件共享相同的状态- 他们不是独立的。为什么我已经为这些组件分配了密钥，我该如何解决这个问题？

var CompletedRow = React.createClass({    
    getInitialState: function () {
        return {
            show: false
        };
    },
    handleChange: function() {
        this.setState.show = !this.setState.show;
        console.log(this.state.show);
    },
    render: function() {        

        return (<tr>
                <td 
                    className="completed" colSpan="3" onClick={this.handleChange} 
                    > {this.props.count} tasks completed
                </td>
            </tr>);
    }
});

var TaskTable = React.createClass({
    // other code omitted for simplicity
    render: function() {
    var rows = [];
    var completedTasks = 0;

    this.state.taskList.forEach(function(task, index) {

        // do something
         if (completedTasks > 0) {
                rows.push(<CompletedRow 
                    count={completedTasks} 
                    key={getKey()} 
                    taskList={this.state.taskList}                        
                    />);
                completedTasks = 0;
            }

    }.bind(this));

        return (
            <div>            
                <table>
                    <tbody>{rows}</tbody>
                </table>
            </div>
        );
    }
});

Answer 1

这可能是一个拼写错误，但您在 handleChange 中有一行正在切换附加到 setState 函数的属性。这是所有组件共享的

this.setState.show = !this.setState.show;

那一行应该是

this.setState({show: !this.state.show});

此外，下一行的 console.log 将反映旧状态，因为 setState 是异步的，允许批处理状态更改。

为什么一个组件的多个实例共享同一个状态？

Why do multiple instances of a component share the same state?

javascript

reactjs

react-jsx