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

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/>
}

This component renders twice and throws an error. I know that the error is due to their being no return statement in the reduce function. However what I don't understand is why does it render twice?

Further when I remove the accumulator[key] = value code it only renders once. As far as I understand, a component can re-render only in four cases

1. change in state
2. change in props
3. forced render
4. parent re-renders.

In my case the parent doesn't re-render (I checked it by using a console.log in the parent component) and this component is stateless and no props have been passed to it. Could someone please explain this behavior?

Answer 1

Problem is with your reduce method, you are not returning accumulator..

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