Question

重新填充表单以使用react hooks进行编辑时出现问题。

父组件：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);

但值未得到更新，值仍保持初始渲染的状态

我不知道为什么会这样。我才刚开始使用React挂钩，请帮助我。

Answer 1

如OP在评论中所述：

API调用完成后会更新initialState变量，我将该initialState变量传递给const [values，setValues] = useState(initialState);，所以它应该更新values变量吗？但是不是！

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

请参见useState API中的lazy initialization：

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

重新渲染时反应自定义钩子状态未更新

1 个答案: