从函数组件中的 Redux Store 接收新值时，useState 不起作用

Question

在此 StackBlitz （你可以玩） 我有以下代码：

App.js

import { Field, Form, Formik } from 'formik';
import React, { useState } from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
import store, { userActions } from './store';

const Suggestion = () => {

  const dispatch = useDispatch();
  const { color } = useSelector(state => state.user);

  return (color === 'Yellow') ? (
    <div>
      We recommend you to change to Green.<br />
      <a href="#" onClick={() => { dispatch(userActions.save({ color: 'Green' })); }}>Change Now!</a>
    </div>
  ) : null;
};

const MyComp = () => {

  const dispatch = useDispatch();
  const userData = useSelector(state => state.user);

  const initialValues = {
    color: 'Green',
  };

  const [ formValues, setFormValues ] = useState((userData.length > 0) ? userData : initialValues);

  console.log(JSON.stringify({ userData, formValues }));

  const onSubmit = (values) => {
    dispatch(userActions.save(values));
  };

  return (
    <Formik
      initialValues={formValues}
      onSubmit={onSubmit}
      enableReinitialize
    >
      {formik => {

        const handleChange = (partialUserData) => {
          setFormValues({
            ...formValues,
            ...partialUserData
          });
          formik.submitForm();
        };

        return (
          <Form>
            <h2>What Color do you use?</h2>
            <Field id="color" as="select" value={formValues.color} onChange={(e) => { handleChange({ color: e.target.value }); }}>
              <option value=''>Select...</option>
              <option value='Green'>Green</option>
              <option value='Yellow'>Yellow</option>
            </Field>
            <Suggestion />
          </Form>
        );
      }}
    </Formik>
  );
};

export default () => {
  return (
    <Provider store={store}>
      <MyComp />
    </Provider>
  );
};

store.js

import { configureStore, createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: {},
  reducers: {
    save(state, action) {
      for (const key in action.payload) {
        state[key] = action.payload[key];
      }
    },
  },
});

const store = configureStore({
  reducer: {
    user: userSlice.reducer,
  },
  devTools: true,
});

export const userActions = userSlice.actions;

export default store;

预期功能

1. 默认选择“绿色”
2. 您选择“黄色”，下面会出现一条建议 (你得到：控制台上的“黄色”）
3. 您选择“绿色”，建议消失（您在控制台上看到：“绿色”）
4. 执行上面的步骤 2
5. 您单击链接：“立即更改！”
6. 选项“绿色”被选中并且建议消失（您在控制台上看到：“绿色”）

我的问题是：

第 6 步没有完全起作用，因为即使建议消失（这很好），该选项：“绿色”没有被选择，在控制台上我仍然得到：“黄色”。

由于某种原因，该行...

const [ formValues, setFormValues ] = useState(...);

...没有保存变量中存储的值：formValues，因为userData具有预期值，如您在下面的图片...

任意关于如何使这项工作有效的想法？

谢谢！

Answer 1

不，这是错误的 React.useState(defaultValue) 它只是用于组件渲染的 React.useState 的默认值，它不会监听新的更改。

您需要使用 React.useEffect() 钩子，如果您将依赖项数组留空，则它会获取依赖项数组，然后 useEffect 将仅在组件渲染时调用一次，但如果您通过依赖作为您的 redux 数据，然后每次您的依赖数据发生更改时，都会调用 useEffect 。

所以最后你的代码将是这样的

const dispatch = useDispatch();
  const userData = useSelector(state => state.user);

  const initialValues = {
    color: 'Green',
  };

  const [ formValues, setFormValues ] = useState(initialValues);
  
  React.useEffect(()=>{
    setFormValues((userData.length > 0) ? userData : initialValues);
    // cleanup function which will be invoked on component unmount
    return ()=> {
      setFormValues(userData)
    }
  },[useData]);

  console.log(JSON.stringify({ userData, formValues }));

  const onSubmit = (values) => {
    dispatch(userActions.save(values));
  };

Answer 2

我不知道捕获新存储值的正确方法是什么。但我可以建议的是创建一个 useEffect 挂钩来设置每次 userData 更改时运行的新表单值。

useEffect(() => {
    setFormValues(userData)
  }, [userData])