为什么这个组件渲染两次？

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函数中没有返回语句。但我不明白的是，为什么它会渲染两次？

此外，当我删除累加器[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>);
}