Question

我想为我的功能性React组件建立一些简单的验证。为此，我正在使用ReactHook的useState实例化一个旨在像这样增长的validationErrors对象：

{}
{'fieldName1': 'Some error message'}
{'fieldName1': 'Some error message', 'fieldName2': 'Another error message'}
{'fieldName1': 'Different error message', 'fieldName2': 'Another error message'}

  const [validationErrors, setValidationErrors] = useState(null);

  // If this function is working correctly then it will either add a
  // new key-value pair if the key doesn't exist yet or will update
  // the value if the key already exists.
  const updateValidationErrors = (name, error) => {
    if ([name] in validationErrors) {
      setValidationErrors({...validationErrors, [name]: error});
    } else {
      setValidationErrors({[name]: error, ...validationErrors});
    }
  };

  const checkValidation = (target) => {
    updateValidationErrors('companyName', 'Test Company 1');
    console.log(validationErrors);
    updateValidationErrors('companyName', 'Test Company 2');
    console.log(validationErrors);
    updateValidationErrors('notes', 'Notes error message 1');
    console.log(validationErrors);
    updateValidationErrors('notes', 'Notes error message 2');
    console.log(validationErrors);
    updateValidationErrors('companyName', 'Test Company 3');
    console.log(validationErrors);
  };

我用console.log得到了奇怪的结果，并且想知道这是否是因为ReactHook的useState的异步延迟很短吗？

或者我的updateValidationErrors代码有问题吗？

注意：我在这里测试了该功能：https://repl.it/repls/WeeklyMustyMiddleware

Answer 1

我想它不会像这样

const [validationErrors, setValidationErrors] = useState(null);

setValidationErrors只是您提到的setState({ validationErrors: <new value> })的简称。

setState是一个异步调用，不能保证在执行setState行后会更新该值。

尝试此操作以查看更新的结果

  const [validationErrors, setValidationErrors] = useState();
  const updateValidationErrors = (name, error) => {
    setValidationErrors({...validationErrors, [name]: error});
  };

  const checkValidation = (target) => {
    updateValidationErrors('companyName', 'Test Company 1');
    updateValidationErrors('companyName', 'Test Company 2');
    updateValidationErrors('notes', 'Notes error message 1');
    updateValidationErrors('notes', 'Notes error message 2');
    updateValidationErrors('companyName', 'Test Company 3');
  };

Answer 2

反应useState不适用于控制台

react useState不是指令性的，则可以使用useEffect进行控制台。

然后您将看到validateErrorsupdate的时间。

将此行添加到您的代码中

useEffect(() => console.log(validationErrors))

当然

import React, { useEffect } from 'react';

尝试正确使用ReactHook的useState

2 个答案:

反应useState不适用于控制台