时间戳

首页 > 解决方案 > 重新渲染时反应自定义挂钩状态未更新

javascript - 重新渲染时反应自定义挂钩状态未更新

问题描述

使用反应挂钩重新填充表单以进行编辑时遇到问题。

父组件：Edit.js

const EditData = (props) => {
    const { Id } = props.match.params;
    const dispatch = useDispatch();
    // calling redux action to get the data
    useEffect(() => {
      dispatch(getDataById(Id));
    }, [Id]);
    const data = useSelector((state) => state.data);
    const initialState = {
      Id: data.cardId || '',
      Number: data.Number || '',
      Date: data.Date,
    };
    //calling custom hook
    const { handleChange, handleSubmit, values,errors } = useForm(
        initialState,// passing initial state to custom hook
        validateOnSubmit,
        submit
    );
    // used to submit the data
    function submit() {
      dispatch(updateCard(values));
    }
    return (<DateForm
            handleSubmit={handleSubmit}
            handleChange={handleChange}
            values={values}
            />);
  };

自定义钩子：useform.js

  const useForm = (initialState, validateOnSubmit, callback) => {
    const [values, setValues] = useState(initialState);
    const [errors, setErrors] = useState({});
    const [isSubmitting, setIsSubmitting] = useState(false);

    const handleChange = (event) => {
      const { name, value } = event.target;
      setValues({
        ...values,
        [name]: value
      });
    };
    const handleSubmit = (event) => {
      event.preventDefault();
      setErrors(validateOnSubmit(values));
      setIsSubmitting(true);
    };

    useEffect(() => {
      if (Object.keys(errors).length === 0 && isSubmitting) {
        callback();
      }
    }, [errors]);

    return {
      handleChange,
      handleSubmit,
      values,
      errors
    };
  };

当 API 调用完成时，react 会重新渲染自定义，但钩子的本地状态没有更新。

const useForm = (initialState, validateOnSubmit, callback) => {
      console.log(initialState);

在第二次渲染时，我可以从 API 接收数据

    const [values, setValues] = useState(initialState);

但是值没有得到更新，值仍然保持初始渲染的状态

我不知道为什么会这样。我刚开始使用反应钩子，请帮助我。

标签： javascriptreactjsreact-reduxreact-hooks

解决方案

正如OP在评论中所说：

当 API 调用完成时，initialState 变量会更新，我将 initialState 变量传递给 const [values, setValues] = useState(initialState);，所以它应该更新 values 变量吗？但事实并非如此！

它应该更新状态，初始状态被分配一次，直到组件卸载。

请参阅useStateAPI，它在延迟初始化中说明：

initialState参数是初始渲染期间使用的状态。在随后的渲染中，它被忽略。

推荐阅读