Javascript 地图方法无法按预期工作答案

【问题标题】：Javascript map method not working as expectedJavascript 地图方法无法按预期工作
【发布时间】：2021-10-07 04:58:46
【问题描述】：

是什么导致使用 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"}

【问题讨论】：

无法复制
除非您显示完整的minimal reproducible example，否则无法知道您的完整应用程序或包含<UseStateArray/> 的子树被渲染了多少次。只需将此代码放入带有仅返回的<App/> 的最小示例中，就可以完全按照您的期望进行操作，仅渲染一次。 codesandbox.io/s/react-hooks-counter-demo-forked-rbtj6

标签： javascript reactjs use-state array-map

【解决方案1】：

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

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

我发现这个 stackoverflow 答案对于跟踪导致父组件重新渲染的属性更改非常有用 Trace why a React component is re-rendering

【讨论】：

我从 index.js 中删除了标签，现在 console.log 只出现一次 :-)