React.useState повторно отображает с неправильным состоянием

Question

У меня есть следующий сокращенный код, который управляет моей приборной панелью

function App(props){
    const [role, setRole] = React.useState("guest");
    const [componentDrawerRender, setComponentDrawerRender] = React.useState(null);

    const handleSelectionDrawerClick = (component) => {

        setComponentDrawerRender(component);
        handleOpenComponentDrawer(true);
    };

    const handleLoginCallback = (user) => {

        if (user !== false) {
          handleCloseComponentDrawer();
          setRole(user.type);    <-- setting the new state does not work 
          console.log(val.type + " -> " + role );   <-- this here shows != values

        } else {
          //do nothing
        }
      };

    return (  
        <Button
        onClick={() => {
          handleSelectionDrawerClick(
            <LoginPage callback={handleLoginCallback} />
          );
        }}
      >
        LOG IN
      </Button>);
}

Цель этого кода - открыть ящик (что он делает), визуализировать компонент в ящике (что он делает), и после того, как пользователь войдет в систему с компонентом, закройте ящик (что он делает) и обновите состояние (что он почти делает).

Проблема возникает в методе handleLoginCallback. Хорошие данные отправляются обратно, а состояние обновляется хорошими данными. Однако только некоторые компоненты на странице обновляются.

Как работает процесс повторного рендеринга для функциональных компонентов? он просто снова вызывает функцию или только каким-то образом пересчитывает возвращаемое значение? Следующий код не пересчитывается при повторном рендеринге. Можно ли, чтобы некоторые состояния зависели от других состояний?

const [mainList, setMainList] = React.useState((role) => {
    console.log(role);
    if (role === undefined || role === null) {
      return GuestListItems(handleSelectionDrawerClick);
    } else if (role === "customer") {
      return CustomerListItems;
    } else {
      return OwnerListItems;
    }
  });

Ниже приведен код в <LoginPage>, который вызывает метод обратного вызова.

onSubmit(e) {
    e.preventDefault();

    this.setState({ isLoading: true });
    this.props.login(this.state, this.handleLoadingBar).then((retState) => {
      if(retState === null){
        this.props.callback(false);       <-- here 
      }else {
        this.props.callback(retState);    <-- here 
      }
    });
  }

Answer 1

onSubmit(e) {
    e.preventDefault();

    this.setState({ isLoading: true });
    this.props.login(this.state, this.handleLoadingBar).then((retState) => {
      if(retState === null){
        this.props.callback(false);       <-- here 
      }else {
        this.props.callback(retState);    <-- here 
      }
    });
  }

Вы устанавливаете начальное состояние этого состояния на функцию «нет» на результат функции.

Answer 2

В вашем коде значение role обновляется при последующем refre sh (т.е. вызове функции), так как вызов setRole. Есть несколько причин, потому что роль не изменяется в строке console.log:

1. role помечается как const;
2. JavaScript не запускает никакую другую функцию, пока не завершится текущая (лучше: стек вызовов становится пустым).

Проверьте это также: https://reactjs.org/docs/hooks-reference.html#functional - updates

Хук useState - это обычная функция, которая получает аргумент и возвращает кортеж. Несмотря на то, что ловушка (и, следовательно, аргумент) вызывается при каждом refre sh, значение аргумента используется только при самой первой инициализации.

Вот описание API: https://reactjs.org/docs/hooks-reference.html#usestate