时间戳

首页 > 解决方案 > 如何比较 2 个 fetch 数组以在 reactjs 中设置状态

reactjs - 如何比较 2 个 fetch 数组以在 reactjs 中设置状态

问题描述

我有一个与 reactjs 中的设置状态相关的问题。

我需要获取 2 个 API，然后想将一个对象（称为team_lead）与一个对象（userProfile）进行比较。对象 ( team_lead) 的 id 是否与另一个对象 ( ) 的 id 相等userProfile。如果 2 个 id 相等，我将设置 state: auth: true。我的“应用”按钮将只显示是否auth: true。我的想法是仅当用户登录并且用户也是团队负责人时才会显示该按钮。

export class TeamInfo extends React.Component {
   state = {
      checked_auth: false,
      team_lead:[],
      userobject: {}
   }
   componentDidMount(){
      axios
        .get(`/teams/13`)
        .then(responseData => {
          this.setState({
             teamlead: responseData.data.team_lead,
          })

        })
        .catch(error => console.error(error));
      axios
        .get(`/profiles/?user=${userObject.user.id}`)
        .then(responseData => {
          if (this.state.teamlead.id === responseData.data[0].id) {
            console.log("tea ok")
            this.setState({
              checked_auth: true

            })
          }

        })
        .catch(error => console.error(error));
   }
  render(){
     return (
        {this.state.checked_auth ? <Button> Apply </Button> : <div></div>}
     )
  }
}

我登录并检查。有时，会显示“应用”按钮。但是，大多数时候，按钮是隐藏的。有人可以帮我处理这个案子吗？

标签： reactjs

解决方案

问题是您正在发送 2 个异步请求。但第二个取决于第一个。

你可以使用Promise.all来解决这个问题。

componentDidMount(){
    const firstRequest = axios
        .get(`/teams/13`)
        .then(responseData => responseData.data.team_lead)
        .catch(error => console.error(error));
      const secondRequest = axios
        .get(`/profiles/?user=${userObject.user.id}`)
        .then(responseData => responseData.data[0])
        .catch(error => console.error(error));
        
      Promise.all([firstRequest, secondRequest]).then(values => 
       if (values[0].id === values[1].id) {
            console.log("tea ok")
            this.setState({
              checked_auth: true

            })
          }
      );
}

推荐阅读