从状态不存在的价值|反应

Question

我的问题

我在我的前端应用程序中使用了React和Apollo。当我作为常规用户登录时，我想被导航到某个路径，但是在之前我需要以selectedCompany值设置提供商状态。但是，有时我会从组件中的提供商CDM中获得我的价值，有时我没有，因此我必须刷新才能获得价值。

我试图解决这个问题，但没有运气。所以我要窥视

我的设置（代码）

在我的登录组件中，我有登录突变，看起来像这样：

login = async (username, password) => {
    const { client, qoplaStore, history } = this.props;
    try {
        const result = await client.mutate({
            mutation: LOGIN,
            variables: {
                credentials: {
                    username,
                    password,
                }}
            });
            const authenticated = result.data.login;
            const { token, roles } = authenticated;
            sessionStorage.setItem('jwtToken', token);
            sessionStorage.setItem('lastContactWithBackend', moment().unix());
            qoplaStore.setSelectedUser(authenticated);
            qoplaStore.setUserSessionTTL(result.data.ttlTimeoutMs);
            if (roles.includes(ROLE_SUPER_ADMIN)) {
                history.push("/admin/companies");
            } else {
                // This is where I'm at
                this.getAndSetSelectedCompany();
                history.push("/admin/shops");
            }
    } catch (error) {
        this.setState({ errorMessage: loginErrorMessage(error) });
    }
};

因此，如果我的登录成功，我会检查用户roles，在这种情况下，我将进入else语句。功能getAndSetSelectedCompany看起来像这样：

getAndSetSelectedCompany = () => {
    const { client, selectedValues, qoplaStore } = this.props;
    client.query({ query: GET_COMPANIES }).then(company => {
        selectedValues.setSelectedCompany(company.data.getCompanies[0]);
    });
};

因此，我正在获取我的公司尝试将其中一个设置在我的提供商中，并用功能setSelectedCompany来确定。selectedValues是我从消费者传递到路由器文件中所有路线的内容：

<QoplaConsumer>
    {(selectedValues) => {
        return (
            ...
        )
    }}
</QoplaConsumer

，在我的提供商中，我有我的setSelectedCompany功能，看起来像这样：

setSelectedCompany = company => {
    this.persistToStorage(persistContants.SELECTED_COMPANY, company);
    this.setState({
        selectedCompany: company
    })
};

和我的selectedValues来自我的提供者状态。

以及在具有我将用户发送到的路由的组件中

async componentDidMount() {
    const { client, selectedValues: { selectedCompany, authenticatedUser } } = this.props;
    console.log('authenticatedUser', authenticatedUser)
    if (selectedCompany.id === null) {
        console.log('NULL')
    }

有时我会进入if语句，有时我没有。但是我宁愿总是参加这个语句。那是我目前的问题

我能获得的所有帮助非常感谢，如果需要更多信息。只是让我知道。

感谢您的阅读。

Answer 1

您的 getAndSetSelectedCompany是异步的，它也称为另一种使用 setState的方法，它也是异步的。

做到这一点的一种方法是将回调传递给getAndSetSelectedCompany，该回调实际上设置了状态时将通过并执行。

更改您的登录组件

  if (roles.includes(ROLE_SUPER_ADMIN)) {
      history.push("/admin/companies");
  } else {
      // This is where I'm at
      this.getAndSetSelectedCompany(()=>history.push("/admin/shops"));
  }

更改称为

的两种方法

getAndSetSelectedCompany = (callback) => {
    const { client, selectedValues, qoplaStore } = this.props;
    client.query({ query: GET_COMPANIES }).then(company => {
        selectedValues.setSelectedCompany(company.data.getCompanies[0], callback);
    });
};
setSelectedCompany = (company, callback) => {
    this.persistToStorage(persistContants.SELECTED_COMPANY, company);
    this.setState({
        selectedCompany: company
    }, callback)
};