在 useCallback() 钩子中反应 setState 没有正确设置状态变量？

Question

I have code that is of the following pattern inside a React FunctionComponent:

const MyComponent: React.FunctionComponent<ISomeInterface> = ({ someArray, someFunction }) => {

  const [someStateObjVar, setSomeStateObjVar] = React.useState({});
  const [isFound, setIsFound] = React.useState(false);

  const handleSomeEvent = React.useCallback((someAttribute: string) => {
    if (someAttribute) {
      setSomeStateObjVar(someArray.find(
        (arrayElement) => ( arrayElement.attribute === someAttribute )
      );
      setIsFound(someStateVar ?? false);
    }
  }
  
  return ( isFound && someStateObjVar ) ? <FoundMatchingComponent /> ? <ComponentNotFound />;

In the above code, there's always a match for someArray element with someAttribute. But the problem is MyComponent always renders ComponentNotFound because isFound always evaluates to FALSE at the last line (return statement).

I was able to fix this with the following refactor below (inserting an intermediate variable, but overall the logic remains the same):

const MyComponent: React.FunctionComponent<ISomeInterface> = ({ someArray, someFunction }) => {

  const [someStateObjVar, setSomeStateObjVar] = React.useState({});
  const [isFound, setIsFound] = React.useState(false);

  const handleSomeEvent = React.useCallback((someAttribute: string) => {
    let foundElement;
    if (someAttribute) {
      foundElement = someArray.find(
        (arrayElement) => ( arrayElement.attribute === someAttribute )
      );
    }
    if (foundElement) {
      setSomeStateObjVar(foundElement);
      setIsFound(true);
    }
  }
  
  return ( isFound && someStateObjVar ) ? <FoundMatchingComponent /> ? <ComponentNotFound />;

With this 2nd version of the code, isFound correctly evaluates to TRUE at the last line, and MyComponent correctly renders FoundMatchingComponent.

Can you please provide an explanation why the first version does not work, while the second one does?

My guess is that the intermediate variable in the second version gives enough time for React to evaluate the isFound variable correctly at the return statement, but I'm not confident this is the explanation. Any advice on improving my code above would be appreciated as well. Thanks.

Answer 1

In the first code snippet, I do not see where someStateVar is defined. If that is the case the variable is undefined , so setIsFound(someStateVar ?? false) will always evaluate as false. Therefore, isFound is false and the return statement will always return <ComponentNotFound /> .

Did you intend to have setIsFound(someStateObjVar ?? false) ?