时间戳

首页 > 解决方案 > 来自国家的价值不存在| 反应

reactjs - 来自国家的价值不存在| 反应

问题描述

我的问题

我在我的前端应用程序中使用 React 和 Apollo。当我以普通用户身份登录时，我希望导航到某个路径，但在此之前我需要使用我的selectedCompany值设置我的提供者状态。但是，有时我从组件中的提供者那里获得我的价值，CDM有时我没有，所以我必须刷新才能获得价值。

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

我的设置（代码）

在我的登录组件中，我有登录突变，如下所示：

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) });
    }
};

因此，如果我的登录成功，我会检查 users 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来自我的供应商州。

在具有路由的组件中，我将用户发送到我的 CDM 中：

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

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

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

谢谢阅读。

标签： reactjs

解决方案

您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)
};

推荐阅读