為什么一個組件的多個實例共享同一狀態？

Question

我正在構建一個待辦事項列表，其中一項功能是在單擊“已完成”文本時顯示已完成任務的列表，並在再次單擊時隱藏該列表。 但是，我無法采取第一步-保存列表的狀態（無論是顯示的還是隱藏的）都無法正常工作。

其中有多個“ 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});

另外，由於setState是異步的，所以允許批處理狀態更改，因此下一行的console.log將反映舊狀態。