React自定义钩子状态无法在重新渲染时更新。

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);

但是values没有更新，values仍然保持初始渲染时的状态。

我无法弄清原因。我刚开始使用react hooks，请帮助我。

- p6aveen

---

你是否在问为什么initialState被更新了但values没有被更新？ - Dennis Vash

我假设 getDataById 已经被导入了？ - rrd

虽然这与正题无关，但建议不要使用大写字母来表示属性名称。因此，从props.match.params中选用'Id'正确吗？还是应该使用'id'？ - rrd

是的，initialState变量在API调用完成时会更新，我将该initialState变量传递给const [values，setValues] = useState(initialState);，所以它应该更新values变量，但实际上并没有！ - p6aveen

@rrd 是的，它是一个 Redux 动作。 - p6aveen

Answer 1

正如OP在评论中所述：

当API调用完成时，initialState变量会更新，我将该initialState变量传递给const [values，setValues] = useState（initialState）;，那么它应该更新values变量。但是它没有！

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

请参见useState API，它在惰性初始化中说明：

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

- Dennis Vash