UseState 仅在第二次单击时显示

Posted 2023-03-17

【中文标题】UseState 仅在第二次单击时显示

【英文标题】：UseState only shows on second click

【发布时间】：2021-01-05 03:37:44

【问题描述】：

我在单击表单提交按钮时使用 React useState 挂钩更新状态，直到第二次单击时状态才会更新。相信我需要使用 useEffect 但不确定如何使用 onClick 实现。

const files = [
  
    id: 'foo'
  
]

const [fieldName, setName] = useState();


const onSubmit = () => 
    files.map((file) => 
      if (!fieldName[file.id]?.value) 
        setName(() => (
          ...fieldName,
          [file.id]: 
            value: test[file.id]?.value,
            error: true
          ,
        ));
      
    );

    console.log(fieldName);
    // Output = 
    // Expected Output =  foo:  error: true  
    
    if (fieldName) // simply to show i need access to updated fieldName at this point

  ;

【问题讨论】：

useState 是异步函数。将控制台移到函数之外

我应该声明我正在尝试使用该函数中的更新状态（如果发现错误，请不要继续）

@James 将其保存到变量中。您可以对该变量调用 setState 并继续在函数中使用该变量。

@404 例子芽？

【参考方案1】：

如 cmets 中所述； useState 是一个异步函数，因此不能保证您在再次检索其值时将获得新值。这是出于性能原因，允许批量处理多个状态更改。

在同一方法中继续使用新值的最简单方法是将其保存到变量中，如下所示：

const [clicked, setClicked] = useState(false);

function onclick(e) 
  setClicked(true);
  if (clicked)  //this goes wrong as clicked likely isn't updated yet
    //do something
  

const [clicked, setClicked] = useState(false);

function onclick(e) 
  const newClicked = true;
  setClicked(newClicked);
  if (newClicked)  //using the variable garantuees you'll get the value you want
    //do something
  

【参考方案2】：

我实现了一个 useEffect 来设置 hasError 状态

useEffect(() => 
    const hasErrors = Object.keys(fieldName).filter(
      (key) => fieldName[key].error
    );
    if (!hasErrors.length) 
      setFormHasError(() => true);
    
  , [fieldName]);

然后我可以在代码中使用以下代码

if (formHasError) 
      return;