React Hook useCallback 不更新状态值

Question

我是 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
试一试，看看控制台。

Answer 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]);

Answer 2

尝试将 handleChange 更新为：

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

React Hook useCallback 不更新状态值

React Hook useCallback not updating State value

shopify

reactjs

react-hooks