使用 .map() 函数在 useEffect 内的嵌套 setState 中无法使用展开运算符

Question

const [columns, setColumns] = useState({

    Configured: {

      progress: "Configured",

      tasks: [],

    },

    Approved: {

      progress: "Approved",

      tasks: [],

    },

    AwaitingPO: {

      progress: "Awaiting PO",

      tasks: [],

    },

    InProduction: {

      progress: "In-Production",

      tasks: [],

    },

    Delivered: {

      progress: "Delivered",

      tasks: [],

    },

  });

  const { loading, error, data } = useQuery(GET_CUSTOMERS);

  useEffect(() => {

    if (data) {

      data.customer.map((item) => {

        setColumns({

          ...columns,

          [item.progress]: {

            ...columns[item.progress],

            tasks: [

              ...columns[item.progress].tasks, ///Spread operator not working here

              item

            ],

          },

        });

      });

    }

  }, [data]);

我正在尝试将多个指定的对象添加item到我的tasks数组中。在我拥有的三项中，仅添加了一项。嵌套状态似乎相当困难，我觉得我在useEffect地图函数本身方面做了一些错误的事情。

Answer 1

您的效果缺少对columns陈旧的关闭columns的依赖性。为了防止依赖性，您可以将回调传递给状态设置器函数。您还以错误的方式使用 Array.prototype.map，您应该使用 Array.prototype.reduce：useEffect(() => {  setColumns((columns) =>    data      ? data.customer.reduce(          (columns, item) => ({            ...columns,            [item.progress]: {              ...columns[item.progress],              tasks: [                ...columns[item.progress].tasks,                item,              ],            },          }),          columns        )      : columns  );}, [data]);

Answer 2

因为 data 是一个 useEffect 对象，无法跟踪其内部变化，因为比较是通过引用进行的你可以这样做这是通过物体的长度进行比较的方法React.useEffect(()=>{},[data.length])或者，您也可以这样做React.useEffect(()=>{},[JSON.stringify(data)]这样你就把它变成一个字符串并且不根据引用进行比较