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

Question

I am building a todo list, and one of the functionalities is to display a list of completed tasks when the "completed" text is clicked and hide the list when it is clicked again. However, I can't get the first step - saving the state of the list, whether shown or hidden - to work.

There are several of these "CompletedRow" components (for different categories of tasks), and while clicking the text does toggle the state successfully, it seems that all these "CompletedRow" components share the same state - they are not independent. Why is this the case when I have already assigned keys to these components, and how can I solve this issue?

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

This may be a typo, but you have a line in handleChange that is toggling a property attached to the setState function. This is shared by all the components

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

That line should be

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

Also, the console.log on the following line will reflect the old state because setState is asynchronous to allow batching of state changes.