React Hook useCallback 不更新状态值答案

【问题标题】：React Hook useCallback not updating State valueReact Hook useCallback 不更新状态值
【发布时间】：2020-03-29 07:09:57
【问题描述】：

我是 React Hooks 的新手。我有一个带有多个输入的 UI，其值在一个对象中。我使用循环创建 UI，因此我想要一个用于更新输入的回调。

“商店”输入使用它自己的回调并成功更新国家。但是“产品”输入永远不会更新状态。我真的不明白为什么这两个回调的行为不同。

代码如下。问题出在handleChange 回调中。

import React, { useCallback, useState, useEffect } from "react";
import { TextField, Form } from "@shopify/polaris";

export default function TextFieldExample() {
  const [values, setValues] = useState({
    "prod-0": "Jaded Pixel",
    "prod-1": "blue diamonds"
  });
  const [shop, setShop] = useState("Joe's house of pancakes");

  const handleChangeShop = useCallback(newName => {
    setShop(newName);
  }, []);

  const handleChange = useCallback((newValue, id) => {
      console.log("Pre: values:", values);
      console.log(id, newValue);
      const newProds = values;
      newProds[id] = newValue;
      setValues(newProds);
      console.log("Post: newProds:", newProds);
    }, [values]);

  useEffect(() => {    // observing if State changes
    console.log("in useEffect: shop:", shop); // this gets called and is updated when changed.
    console.log("in useEffect: values:", values); // this never gets called or updated.
  }, [values, shop]);

  const items = [];
  Object.keys(values).forEach(function(prod) {
    items.push(
      <TextField label={"Product " + prod.substr(5)} id={prod} value={values[prod]} onChange={handleChange} />
    );
  });
  return (
    <Form>
      <TextField label="Shop" id="shop" value={shop} onChange={handleChangeShop}/>
      {items}
    </Form>
  );
}

代码沙盒在这里：https://codesandbox.io/s/fast-tdd-1ip38
试试看，看看控制台。

【问题讨论】：

你正在改变状态 values 对象而不是返回一个新的对象引用。

标签： reactjs shopify react-hooks

【解决方案1】：

您正在改变values 状态，请参阅this 沙盒

将您的 handleChange 函数更改为

const handleChange = useCallback((newValue, id) => {
  const newProds = { ...values };
  newProds[id] = newValue;
  setValues(newProds);
}, [values]);

您可以将其进一步更改为

const handleChange = useCallback((newValue, id) => {
  setValues(prods => ({...prods, [id] : newValue }));
}, [values]);

【讨论】：

我真是个白痴！谢谢！我非常专注于“React-ness”，错过了明显的 JS 混乱！

【解决方案2】：

尝试将handleChange 更新为：

const handleChange = useCallback(
    (newValue, id) => {
      console.log("Pre: values:", values);
      console.log(id, newValue);
      setValues(state => ({ ...state, [id]: newValue}));
    },
    [values]
  );

【讨论】：