通过api响应进行映射

Question

因此，我试图同时发出2个get请求，一个请求获取商品的名称，另一个请求获取图片的网址。这是我的代码

componentDidMount(){

      let url = ``;
      let url2 = ``;



        fetch(url,{
          method: 'GET'
        })
        .then((response)=> response.json())
        .then((responseJson) => {
          const newItems = responseJson.items.map(i => {
            return{
              id: 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 newItems = responseJson.item.map(i => {
            return{
              picId: i.picture.type_id,
              img: i.picture.url[0]
            };
          })
          const newArr = [...this.state.items, ...newItems];
          var resObj = newArr.reduce(function(res, obj) {
              for(var key in obj) {
                  if (obj.hasOwnProperty(key)) {
                      res[key] = obj[key];
                  }
              }
              return res;
          }, {});

          const newState = {
            items: [resObj]
          }

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


    }

---

           <div className="row">

              {this.state.items.map(i => <Item picId={i.picId} id={i.id} 
              img={i.img} name={i.name} />)}

            </div>

---

发生的事情是，当我仅将“名称”作为道具传递时，每个项目都显示了其名称，但是当我将“ img”传递给它时，会发生某种替代，并且姓氏只有一个图片显示出来。