代码之家 › 专栏 › 技术社区 › Martin Nordström

不存在状态的值反应

reactjs

Martin Nordström · 技术社区 · 6 年前

我的问题

我在我的前端应用程序中使用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]);
    });
};

所以我要让我的公司尝试将其中一个设置为providers状态 setSelectedCompany 。 selectedValues 是我从我的消费者传递到路由器文件中所有路由的内容:

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

在我的提供者里 设置选定公司 函数如下:

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

还有我的 选定值 来自我的提供者状态。

在这个组件中,我将用户发送到的路径是cdm:

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

有时我进入if语句,有时我不进入,但我总是进入if语句。这就是我现在的问题

所有的帮助,我可以得到极大的赞赏,如果更多的信息是必要的。告诉我就行了。

谢谢你的阅读。

1 回复 | 直到 6 年前

Gabriele Petrioli 6 年前

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