使用 .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)]

这样你就把它变成一个字符串并且不根据引用进行比较