动态填充对象以响应数组中的值答案

【问题标题】：Fill an object dynamically in react with values from an array动态填充对象以响应数组中的值
【发布时间】：2021-12-28 13:15:08
【问题描述】：

我正在尝试用从对象数组中获取的值填充一个对象，但它没有按预期工作。

这是一个简化的代码示例

https://codesandbox.io/s/crazy-nobel-c7xdb?file=/src/App.js

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {
  const [fieldsValues, setFieldsValues] = useState({});
  const items = [{ value: "a" }, { value: "b" }, { value: "c" }];

  useEffect(() => {
    items.map((item, index) => {
      return setFieldsValues({
        ...fieldsValues,
        [index]: item.value
      });
    });
  }, []);

  return (
    <div className="App">
      <h2> {` fieldsValues = ${JSON.stringify(fieldsValues)}`} </h2>
    </div>
  );
}

我希望 fieldsValues 返回这个：

{
  0: "a",
  1: "b",
  2: "c"
}

我现在得到了什么：

fieldsValues = {"2":"c"}

【问题讨论】：

标签： javascript arrays reactjs object

【解决方案1】：

你通过这样做来修复它

useEffect(() => {
  items.map((item, index) => {
    return setFieldsValues((prev) => ({
      ...prev,
      [index]: item.value,
    }));
  });
}, []);

更好的方法是

useEffect(() => {
  const data = items.reduce(
    (prev, item, index) => ({ ...prev, [index]: item.value }),
    {}
  );

  setFieldsValues((prev) => ({ ...prev, ...data }));
}, []);

【讨论】：

【解决方案2】：

要创建对象，将数组映射到[index, value] 对，并使用Object.fromEntries() 转换为对象：

const items = [{ value: "a" }, { value: "b" }, { value: "c" }];

const result = Object.fromEntries(items.map(({ value }, index) => [index, value]))

console.log(result)

但是，您使用数组的方式，然后需要设置状态在反应上下文中实际上没有意义。

如果数组是一个prop，你应该把它作为一个依赖添加到useEffect：

const arrToObj = items => Object.fromEntries(items.map(({ value }, index) => [index, value]))

export default function App({ items }) {
  const [fieldsValues, setFieldsValues] = useState({});

  useEffect(() => {
    setState(() => arrToObj(items))
  }, [items]);
  
  ...

如果是静态数组，则设置为setState的初始值：

const arrToObj = items => Object.fromEntries(items.map(({ value }, index) => [index, value]))

const items = [{ value: "a" }, { value: "b" }, { value: "c" }];
    
export default function App({ items }) {
  const [fieldsValues, setFieldsValues] = useState(() => arrToObj(items));
      
  ...

【讨论】：

【解决方案3】：

按照你的方式应该是这样的

  useEffect(() => {
    let test={}
    items.map((item, index) => {
      return setFieldsValues((prev)=>{
        return {
        ...prev,
        [index]: item.value
      }
      });
    });
  }, []);

【讨论】：