React Hook useCallback не обновляет значение State - PullRequest
Новая
       5

React Hook useCallback не обновляет значение State

0 голосов
/ 29 марта 2020

Я новичок в React Hooks. У меня есть интерфейс с несколькими входами со значениями в объекте. Я создаю пользовательский интерфейс с al oop, поэтому я хотел бы иметь один обратный вызов для обновления входных данных.

enter image description here

«Магазин» input использует свой собственный обратный вызов и успешно обновляет состояние. Но входы «Product» никогда не обновляют состояние. Я не очень понимаю, почему эти два обратных вызова ведут себя по-разному.

Код ниже. Проблема в обратном вызове 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
Попробуйте и посмотрите на консоль.

Ответы [ 2 ]

1 голос
/ 29 марта 2020

Попробуйте обновить handleChange до этого: 

const handleChange = useCallback(
    (newValue, id) => {
      console.log("Pre: values:", values);
      console.log(id, newValue);
      setValues(state => ({ ...state, [id]: newValue}));
    },
    [values]
  );
1 голос
/ 29 марта 2020

Вы изменяете состояние values, см. эту песочницу

Измените свою функцию 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]);
...