我有以下代码(为了简单起见而简化)。我希望我的提交组件在单独单击(有效)或按下按钮以显示所有作者(无效)时显示作者。
我已经确认,当我单击按钮时,SubmissionList 状态正在更改,并且提交的初始状态也已正确设置,那么为什么 setState 更改没有过滤到提交?
我确信我错过了一些东西,所以任何帮助将不胜感激。谢谢!
let Submission = React.createClass({
getInitialState: function() {
return {
showAuthor: this.props.revealed
};
},
reveal: function() {
this.setState({
showAuthor: !this.state.showAuthor
});
},
render: function() {
let authorText;
if (this.state.showAuthor) {
authorText = " - " + this.props.author;
} else {
authorText = "";
}
return (
<li className="submission" onClick={this.reveal}>
<span className="submissionText">
{this.props.text}
</span>
<span className="submissionAuthor">
{authorText}
</span>
</li>
);
}
});
let SubmissionList = React.createClass({
getInitialState: function() {
return {
revealAll: true
};
},
revealAllSubmissions: function() {
this.setState({
revealAll: !this.state.revealAll
});
},
render: function() {
let revealed = this.state.revealAll;
let submissionNodes = this.props.data.map(function(submission) {
return (
<Submission author={submission.author} key={submission.id} text={submission.text} revealed={revealed} />
);
});
return (
<div className="allSubmissions">
<button onClick={this.revealAllSubmissions}>Reveal All</button>
<ul className="submissionList">
{submissionNodes}
</ul>
</div>
);
}
});
编辑:实际上无法看到段落中写出的我的标签。为了清晰起见进行了更新。
最佳答案
如果您希望两个组件都具有内部状态,则需要添加 componentWillReceiveProps
提交
的处理程序。并同步 Prop 以进行说明。
let Submission = React.createClass({
getInitialState: function() {
return {
showAuthor: this.props.revealed
};
},
componentWillReceiveProps: function(nextProps) {
if(this.props.revealed !== nextProps.revealed) {
this.setState({
showAuthor: nextProps.revealed
});
}
},
...
但是正如您所看到的,这会导致代码重复。现在你有两个状态源(props 和内部组件状态)。更好的想法是将状态移动到父组件并使 Submission
成为代表性组件(没有内部状态)
let Submission = ({showAuthor, author, toggle, text}) => (
<li className="submission" onClick={toggle}>
<span className="submissionText">
{text}
</span>
<span className="submissionAuthor">
{showAuthor ? `-${author}` : null}
</span>
</li>
)
其中toggle
是一个函数,用于切换showAuthor
以存储在SubmissionList
状态中的当前提交。
UPD 您可以传递仅切换当前提交的特定切换。例如
let submissionNodes = this.props.data.map(function(submission) {
return (
<Submission
author={submission.author}
key={submission.id}
text={submission.text}
toggle={() => this.toggleSubmissionById(submission.id)} />
);
})
关于javascript - 为什么我的 React 组件没有在 setState() 上重新渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38360353/