【问题标题】：update array of objects using useEffect in React Hooks在 React Hooks 中使用 useEffect 更新对象数组
【发布时间】：2021-01-01 16:33:01
【问题描述】：

我有以下数组，其中包含使用React 的对象，该数组显示特定页面中的用户字段数据。

使用useEffect 更新此组件的正确方法是什么，特别是在呈现数据之前加载页面的数组，包括：

要推入数组的新元素

（在页面加载时）

userData.splice(3, 0,
        {
          key: "gender",
          label: "DFR",
        },
    );

初始数组

  const userData = [
    {
      key: "first_name",
      label: "XYZ",
    },
    {
      key: "last_name",
      label: "XYYZ",
    },
    {
      key: "username",
      label: "ABC",
    },
    {
      key: "age",
      label: "ABCC",
    },
    {
      key: "nationality",
      label: "EDP",
    },
  ];

我尝试了以下方法，但由于某种原因它不起作用：

  useEffect(() => {
    userData.splice(3, 0,
        {
          key: "gender",
          label: "DFR",
        },
    );
  }), [];

P.S：如你所见，我不打算使用push。

【问题讨论】：

你能解释一下为什么你不想使用push吗？
@Ezrab_ 我使用的是splice，因为我希望数据显示在特定位置，我还需要在页面加载时触发该逻辑
我没有完全理解你想要做什么。您想在组件最初呈现之前修改初始数组并使用新值吗？如果是这样，你不能用钩子来做，因为钩子是在组件已经渲染之后运行的。 useEffect 钩子的效果将在初始渲染后呈现。
另外，您想要插入到数组中的项目是组件可用的还是从某个地方获取的？
@zhulien 没错，你所描述的正是我想要完成的，新项目也在上面的帖子中提到。不是从其他地方获取的。

标签： javascript reactjs algorithm ecmascript-6 react-hooks

【解决方案1】：

也许更好的方法是使用 ES6 扩展语法。

useEffect(() => {
    userData = [...userData,{key: "gender",
          label: "DFR"}]
    );
  }), [];

【讨论】：

【解决方案2】：

是的，因为您只是直接在变量 userData 中更新。如果你想要 React 重新渲染，你应该使用 setState

    const [userData, setUserDate] = useState(initialData)
    
    useEffect(() => {
        setUserDate(userData.splice(3, 0,
            {
              key: "gender",
              label: "DFR",
            },
        ))
   }), [];

【讨论】：

【解决方案3】：

你不需要为此使用效果（实际上恰恰相反 - 你不应该）。

useEffect 是一个在组件的初始渲染之后调用的钩子。

在您的情况下，您只需要以数组的形式生成一组字段以用于组件渲染。如果这些字段是静态、不变和对于给定组件始终相同，您只需将它们封装在组件中的普通变量中本身，然后在渲染中使用它们。就这么简单。

另一方面，如果它们是非静态的，并且同一组件的不同实例可以具有不同的字段集 - 在父组件中计算它们并将它们作为 props 向下传递。

但是，如果字段可以在组件的整个生命周期内动态更改，则需要使用 state。再次，您只需将计算字段集分配给初始状态即可。

在所有这些情况下，您都会在渲染阶段发生之前准备好字段。

【讨论】：