我正在尝试创建一个列表并使其可点击,这样一旦我点击一个项目,我就会重定向到另一个页面
这是渲染方法
render() {
const quesItems = this.state.questions.map((question, i) => {
return (
<li key={this.props.account.id === question.expID}>
<a href={`/ans/${question.id}`}> {question.description}</a>
</li>
);
});
return (
<div>
<h1> Answer the questions here!</h1>
<ul>
{quesItems}
</ul>
</div>
);
}
但是,当我点击列表中的任何项目时,我收到以下警告。我该如何解决?
index.js:2177 Warning: flattenChildren(...): Encountered two children with the same key, `false`. Child keys must be unique; when two children share a key, only the first child will be used.
答案 0 :(得分:1)
表达式this.props.account.id === question.expID
返回一个布尔值。 key
道具通常不应该是布尔值(只有两个不同的值)。可能quesItems
包含expID
不等于this.props.account.id
的多个项目。所有这些都将使用key={false}
呈现,这是不允许的。关键道具的正确值可能只是问题id
;
编辑:根据@Colin的建议,我添加了过滤逻辑。另请参阅Array.prototype.filter()。
render() {
const questions = this.state.questions.filter(question => question.expID === this.props.account.id)
return (
<div>
<h1>Answer the questions here!</h1>
<ul>
{questions.map(({id, description}) => (
<li key={id}>
<a href={`/ans/${id}`}>{description}</a>
</li>
))}
</ul>
</div>
);
}