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代码时，它仅呈现一次。据我了解，组件只能在四种情况下重新渲染

状态改变
道具变更
强制渲染
父母重新提出。

在我的情况下，父级不会重新渲染（我通过使用父级组件中的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>);
}

为什么该组件渲染两次？

1 个答案: