FullStackOpen React入门课1.14轶事练习 最高票轶事无法显示求助

错误原因&修正方案 #

• 错误1：bestAnecdote 是存储最高票轶事文本的普通字符串变量，不是React组件，你用<bestAnecdote />的组件标签写法无法渲染，直接用{bestAnecdote}输出变量值即可。
• 错误2：索引查找逻辑错误，vote.indexOf(Mostvote) 中你传入的是Mostvote函数本身，应该传入最高票数的数值Math.max(...vote)，才能正确找到最高票数对应的轶事索引。
• 错误3：Mostvote 组件传参错误，你传入的vote = {Mostvote}是把组件自身当参数传进去了，这个组件可以直接读取当前的vote状态，不需要额外传参。

修正后核心代码 #

// 正确计算最高票轶事
const bestAnecdote = anecdotes[vote.indexOf(Math.max(...vote))];

return (
  <div>
    <Header contents = {contents.text1}/>
    {anecdotes[selected]}<br/>
    <Vote vote = {vote[selected]}></Vote>
    <Button handleClick={Anecdotevoting} text = 'vote'/>
    <Button handleClick={() => setSelected(random)} text = 'next anecdote'/>
    <Header contents = {contents.text2}/>
    {/* 直接输出字符串变量即可 */}
    {bestAnecdote}
    <br/>
    {/* 不需要传参直接调用组件 */}
    <Mostvote />
  </div>
)

内容的提问来源于stack exchange，提问作者Lynn