Javascript映射方法未按预期工作

Question

是什么导致使用map方法将每个数组索引打印两次。组件是双重渲染的吗？为什么会这样？

import React from 'react';
    
const data = [
  { id: 1, name: 'john' },
  { id: 2, name: 'peter' },
  { id: 3, name: 'susan' },
  { id: 4, name: 'anna' },
];
    
const UseStateArray = () => {
  const [people,setPeople] = React.useState(data)

  return <>
  {
    people.map((person)=>{
      console.log(person);
    })
  }
  </>;
};

我在控制台中的输出是：

{id: 1, name: "john"}
{id: 2, name: "peter"}
{id: 3, name: "susan"}
{id: 4, name: "anna"}
{id: 1, name: "john"}
{id: 2, name: "peter"}
{id: 3, name: "susan"}
{id: 4, name: "anna"}

Answer 1

如果您使用代码查看这个codesandbox示例，您可以在console选项卡上看到console日志只发生一次https://codesandbox.io/s/nervous-hill-0k32k?file=/src/App.js

最有可能的是，您在其上呈现此组件的父组件正在导致重新呈现，这就是为什么控制台会出现这种情况。日志显示两次。

我发现这个stackoverflow答案非常有用，可以跟踪是什么属性更改导致父组件重新渲染跟踪为什么React组件被重新渲染