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

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>);
}