Я новичок в React Hooks. У меня есть интерфейс с несколькими входами со значениями в объекте. Я создаю пользовательский интерфейс с al oop, поэтому я хотел бы иметь один обратный вызов для обновления входных данных.
«Магазин» 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
Попробуйте и посмотрите на консоль.