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 示例，您可以在控制台选项卡上看到控制台日志仅发生一次 https://codesandbox.io/s/nervous-hill-0k32k?file=/src/App.js

很可能是您在其上渲染此组件的父组件导致了重新渲染，这就是 console.log 出现两次的原因。

我发现这个 Whosebug 答案对于跟踪导致父组件重新渲染的属性更改非常有用

Javascript 地图方法未按预期工作

Javascript map method not working as expected

javascript

array-map

reactjs

use-state