Как заполнить состояние после вызова действия в useEffect?

Question

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

useEffect(() => {
        getProduct(id);
    }, [getProduct]);

const [formData, setFormData] = useState({});

Я пытался сохранить как это:

const ProductEdit = ({getProduct, updateProduct, id, products}) => {
    useEffect(() => {
        getProduct(id);
    }, [getProduct]);

    const [formData, setFormData] = useState({
        name: '',
        quantity: '',
        price: '',
        description: '',
        category: '',
        isImportant: ''
    });

    const {name, quantity, price, description} = formData;

    products.product && setFormData(products.product);

Answer 1

Вам нужно использовать useEffect хук, чтобы установить переменную состояния

const ProductEdit = ({getProduct, updateProduct, id, products}) => {
    useEffect(() => {
        getProduct(id);
    }, [getProduct]);

    const [formData, setFormData] = useState({
        name: '',
        quantity: '',
        price: '',
        description: '',
        category: '',
        isImportant: ''
    });

    const {name, quantity, price, description} = formData;
    
    // This hook will only trigger when `products` will change
    useEffect(() => {
      products.product && setFormData(products.product);
    }, [products]);
    
    
}