為什么這個組件渲染兩次？

Question

export const AppComponent =()=>{
console.log('rendered');
const parameter = 'apple:two,mango:three'
    .split(',')
    .reduce((accumulator, currentValue) => {
      const [key, value] = currentValue.split(':');
      accumulator[key] = value;
    }, {});
return <div/>
}

此組件呈現兩次並引發錯誤。 我知道錯誤是由於它們在 reduce 函數中沒有 return 語句。 但是我不明白的是為什么它渲染兩次？

此外，當我刪除accumulator[key] = value代碼時，它只呈現一次。 據我了解，一個組件只能在四種情況下重新渲染

1. 狀態變化
2. 道具的變化
3. 強制渲染
4. 父級重新渲染。

在我的情況下，父組件不會重新渲染（我通過在父組件中使用 console.log 檢查了它）並且該組件是無狀態的，並且沒有傳遞給它的道具。 有人可以解釋這種行為嗎？

Answer 1

問題在於您的 reduce 方法，您沒有返回累加器..

const App=()=> {
  console.log("rendered");
  const parameter = 'apple:two,mango:three'
    .split(',')
    .reduce((accumulator, currentValue) => {
      const [key, value] = currentValue.split(':');
      accumulator[key] = value;
      return accumulator; // this line should fix
    }, {});
  return(<div>hello</div>);
}