useState 挂钩在页面刷新时丢失地图数据

Question

我正在为我的添加产品表单使用 useState 挂钩。当我刷新我的页面时，字段类别的数据没有显示（我正在尝试显示类别，因此用户可以从列表中 select 类别来为该类别创建产品）。但！数据保存在 redux store 中： enter image description here 它仅在我使用 react router() 转到另一个页面然后返回时显示。

这是我的代码：

export const AddProduct = () => {
    const dispatch = useDispatch();
    const userId = useSelector(state => state.auth.userId);
    const categories = useSelector(state => state.categories.categories);
    const [avatar, setAvatar] = React.useState('');

    React.useEffect(() => {
        dispatch(categoriesActions.fetchCategories());
    }, [dispatch]);

    const [orderForm, setOrderForm] = React.useState({
        title: {
            elementType: 'input',
            label: 'Title',
            elementConfig: {
                type: 'text',
                placeholder: 'Title'
            },
            value: '',
            validation: {
                required: true
            },
            valid: false,
            touched: false
        },
        price: {
            elementType: 'input',
            label: 'Price',
            elementConfig: {
                type: 'text',
                placeholder: 'Price'
            },
            value: '',
            validation: {
                required: true
            },
            valid: false,
            touched: false
        },

        description: {
            elementType: 'textarea',
            label: 'Description',
            elementConfig: {
                type: 'text',
                placeholder: 'Description'
            },
            value: '',
            validation: {
                required: true
            },
            valid: false,
            touched: false
        },
        category: {
            elementType: 'select',
            label: 'Select category',

            elementConfig:
                categories.map(category => (
                    <option key={category._id} value={category.title}>
                        {category.title}
                    </option>))
            ,

            value: '',
            validation: {
                required: true
            },
            valid: false,
            touched: false
        },
    });

    const [formIsValid, setFormIsValid] = React.useState(false);

    const addProductData = event => {
        event.preventDefault();
        const formData = {};
        for (let formElementIdentifier in orderForm) {
            formData[formElementIdentifier] = orderForm[formElementIdentifier].value;
        }
        const product = {
            userId: userId,
            title: formData.title,
            price: formData.price,
            description: formData.description,
            category: formData.category
        }
        dispatch(productsActions.addProduct(product));
    }

    const inputChangedHandler = (event, inputIdentifier) => {
        const updatedFormElement = updateObject(orderForm[inputIdentifier], {
            value: event.target.value,
            valid: checkValidity(
                event.target.value,
                orderForm[inputIdentifier].validation
            ),
            touched: true
        });
        const updatedOrderForm = updateObject(orderForm, {
            [inputIdentifier]: updatedFormElement
        });

        let formIsValid = true;
        for (let inputIdentifier in updatedOrderForm) {
            formIsValid = updatedOrderForm[inputIdentifier].valid && formIsValid;
        }
        setOrderForm(updatedOrderForm);
        setFormIsValid(formIsValid);
    };

    const formElementsArray = [];
    for (let key in orderForm) {
        formElementsArray.push({
            id: key,
            config: orderForm[key]
        });
    }
    let form = (
        <form onSubmit={addProductData}>
            {formElementsArray.map(formElement => (
                <Input
                    key={formElement.id}
                    elementType={formElement.config.elementType}
                    elementConfig={formElement.config.elementConfig}
                    value={formElement.config.value}
                    label={formElement.config.label}
                    hint={formElement.config.hint}
                    invalid={!formElement.config.valid}
                    shouldValidate={formElement.config.validation}
                    touched={formElement.config.touched}
                    changed={event => inputChangedHandler(event, formElement.id)}
                />
            ))}
            <Button btnType="Success" disabled={!formIsValid}>ORDER</Button>

        </form>
    )

    return (
        <div class="wrapper">
            <Header />
            <article class="main">
                <div class="row">
                    <div class="item--1-4 image-block">
                        <div class="product-image-group">
                            <img class="product-image-big" src={`/${avatar}`} />
                            <hr class="border-divider" />
                            <input type="file" onChange={e => setAvatar(e.target.files[0].name)} name="imageUrl" id="imageUrl" />
                        </div>
                    </div>
                    <div class="item--3-4">
                        <div class="item-title">
                            <h3>Add product</h3>
                            <hr class="border-divider" />
                        </div>
                        {form}
                    </div>
                </div>
            </article>
            <LeftMenu />
        </div>
    )
}

这是我的代码中与 select 字段相关的行：

 elementConfig:
                categories.map(category => (
                    <option key={category._id} value={category.title}>
                        {category.title}
                    </option>))

Answer 1

那是因为第一次加载该组件时，categories 中没有任何内容，当设置 categories 时，您不会再次设置 orderForm 数据。这叫做 stale props 你需要这样做：


 useEffect(() => {
    setOrderForm((oldValue) => ({
      ...oldValue,
      category: {
        ...oldValue.category,
        elementConfig: categories.map((category) => (
          <option key={category._id} value={category.title}>
            {category.title}
          </option>
        )),
      },
    }));
 }, [categories])

这样，每次 categories 数据更改时，您都会相应地更改 orderForm 状态

useState 挂钩在页面刷新时丢失地图数据

useState hook losing map data on page refresh

reactjs

redux

use-state