![](/img/trans.png)
[英]Share State between two specific instances of the same react component React
[英]Why do multiple instances of a component share the same state?
我正在构建一个待办事项列表,其中一项功能是在单击“已完成”文本时显示已完成任务的列表,并在再次单击时隐藏该列表。 但是,我无法采取第一步-保存列表的状态(无论是显示的还是隐藏的)都无法正常工作。
其中有多个“ 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>
);
}
});
这可能是一个错字,但是handleChange
中有一行正在切换附加到setState
函数的属性。 由所有组件共享
this.setState.show = !this.setState.show;
那条线应该是
this.setState({show: !this.state.show});
另外,由于setState是异步的,所以允许批处理状态更改,因此下一行的console.log
将反映旧状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.