反应-获取多个获取请求

时间:2018-09-03 13:43:45

标签: reactjs rest api get fetch-api

我想同时从2个不同的URL向多个API发出get请求,然后我要使用新属性“ img”更新状态下的数组“ items”,而不是覆盖它,我正在寻找添加它的方法。我想保留第一个请求中的属性。这是我的尝试。

  componentDidMount(){

      let url = ``;
      let url2 = ``

        fetch(url,{
          method: 'GET'
        })
        .then((response)=> response.json())
        .then((responseJson) => {
          const newItems = responseJson.items.map(i => {
            return{
              itemId: i.itemId,
              name: i.name,
            };
          })
          const newState = Object.assign({}, this.state, {
            items: newItems
          });

          console.log(newState);
          this.setState(newState);
        })
        .catch((error) => {
          console.log(error)
        });


        fetch(url2,{
          method: 'GET'
        })
        .then((response)=> response.json())
        .then((responseJson) => {
          const newImg = responseJson.item.map( data=> {
            return{
              img: data.picture.url
            };
          })
          const newState = Object.assign({}, this.state, {
            items: newImg
          });

          console.log(newState);
          this.setState(newState);
        })
        .catch((error) => {
          console.log(error)
        });
    }

2 个答案:

答案 0 :(得分:1)

您可以使用case_arrays方法获得更多信息here。例如:

log

答案 1 :(得分:0)

使用EC6 Spread运算符

this.setState({items:{... this.state.items,newItems}});