Javascript 如何在reactjs中为联系人API和消息API编写2获取方法？

我是新手。我可以从json API映射数据。我的目标是当我们在联系人列表中保存一个号码时，它也应该在消息列表中显示姓名。我想创建两个获取数据，即

messageData、ContactData

，它们应该比较

message-API

和

COntact-API

的电话号码。若联系人API和消息API中的电话号码相同，则应返回姓名，否则应仅返回电话号码

联系人json数据类似于

触点组件：

显示聊天组件：

fetchChat() {
const { phone } = this.props.match.params ;
fetch(`api/conversation/${phone}`)
.then(response => response.json())
.then(data => this.setState({ messageList: data})
);
}

render(){
    const {messageList} = this.state;
    const { phone } = this.props.match.params ;
       return(
        <div>
          <ViewHeader phone={this.props.match.params}/>
        <Container className="viewMessage ">
        {messageList.map(data =>
        <Grid>
  <Grid.Row key={data.id}>      
    <p>{data.message}</p>
    </Grid.Column>     
  </Grid.Row>          
</Grid>
)}
</Container>
          <TypeHere phone={this.props.match.params}/>
</div>
    );
        }
        }

fetchChat（）{
const{phone}=this.props.match.params；
fetch（`api/conversation/${phone}`）
.then（response=>response.json（））
.then（data=>this.setState（{messageList:data}）
);
}
render（）{
const{messageList}=this.state；
const{phone}=this.props.match.params；
返回(
{messageList.map（数据=>
{data.message}

)}
);
}
}

有人能帮我吗

   const URL1= "contactApi"

   const URL2= "messageApi"

我一直使用promise.force和fetch来解析这两个端点

   Promise.all([
  fetch(URL1),
  fetch(URL2),
]).then(responses => responses
  ).then(responses => Promise.all(responses.map(r => r.json())))
.then(data=>writeLogic(data));


function writeLogic(data){
  let nameOrPhone;
  const contactApiData = data[0]
  const messageApiData = data[1]
  let isPresent
  for(let m of messageApiData){
    isPresent=false
      for(let c of contactApiData){
    if(m.phone === c.phone){
      isPresent=true
      nameOrPhone.push(c.name)
    }
  }
    if(!isPresent){
      nameOrPhone.push(m.phone)
    }
  }
  //update your state here if you are using React
  //this.setState({nameOrPhone})
  console.log(nameOrPhone)
}

数据将包含数组中两个端点的结果。 您可以使用数据并在其上写入逻辑

---

参考：

你写过代码吗？请提供一些工作代码以及您正面临的问题。您可以使用Promise.all（）或async/wait进行并行调用，并等待两个结果出现，然后继续执行进一步的语句。我不知道这个链接是否对你有帮助，但你仍然可以看看它，请粘贴一个代码的最小样本以获得帮助。我认为这不属于我们的范围。它进入了核心javascript。@NileshJain-我已经更新了代码。你能看一下功能吗？@VineethSai-很抱歉没有提供相关代码。我已经更新了代码。你能看一下功能吗？是的，我将使用Promise。除了我的问题外，我的问题是如何编写以及我需要在哪里编写用于比较两个API的逻辑。@Chandan在你的承诺得到解决后，你可以向函数添加逻辑。并在那里更新您的状态并呈现数据。（编辑解决方案）此外，问题中的组件没有正确缩进，因此很难阅读

fetchChat() {
const { phone } = this.props.match.params ;
fetch(`api/conversation/${phone}`)
.then(response => response.json())
.then(data => this.setState({ messageList: data})
);
}

render(){
    const {messageList} = this.state;
    const { phone } = this.props.match.params ;
       return(
        <div>
          <ViewHeader phone={this.props.match.params}/>
        <Container className="viewMessage ">
        {messageList.map(data =>
        <Grid>
  <Grid.Row key={data.id}>      
    <p>{data.message}</p>
    </Grid.Column>     
  </Grid.Row>          
</Grid>
)}
</Container>
          <TypeHere phone={this.props.match.params}/>
</div>
    );
        }
        }

   const URL1= "contactApi"

   const URL2= "messageApi"

   Promise.all([
  fetch(URL1),
  fetch(URL2),
]).then(responses => responses
  ).then(responses => Promise.all(responses.map(r => r.json())))
.then(data=>writeLogic(data));


function writeLogic(data){
  let nameOrPhone;
  const contactApiData = data[0]
  const messageApiData = data[1]
  let isPresent
  for(let m of messageApiData){
    isPresent=false
      for(let c of contactApiData){
    if(m.phone === c.phone){
      isPresent=true
      nameOrPhone.push(c.name)
    }
  }
    if(!isPresent){
      nameOrPhone.push(m.phone)
    }
  }
  //update your state here if you are using React
  //this.setState({nameOrPhone})
  console.log(nameOrPhone)
}