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

Posted 2023-02-22

【中文标题】Javascript 地图方法无法按预期工作

【英文标题】：Javascript map method not working as expected

【发布时间】：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

【参考方案1】：

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

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

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

【讨论】：

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