ReactJS 将 fetch 的输出保存到 var？

Question

又是我，我仍在使用 ReactJS 前端和 NodeJS 后端开发我的收藏项目。

今天我正在尝试添加一个函数“onClick”，我在其中设置了一个新的 urlImages 数组。

为了做到这一点，我必须将我的 fetch 输出的值保存在一个名为“obj”的变量中，这样我就可以在另一个 fetch 中再次使用它。这样做的重点是当我点击一个集合的图像，它设置了一个新的 urlimages 数组，它将获取属于该集合的图像的 url。

这不应该那么难，但我在做那件事时遇到了麻烦..有人可以帮助我吗？

import React from 'react';
import { render } from 'react-dom';
import Gallery from 'react-photo-gallery';
import Photo from './Photo';


class PhotoGallery extends React.Component {
  constructor(props){
    super(props);
    this.onClick = this.onClick.bind(this);
    this.state = {
      urlImages: [],
      nomCollection: []
    };
  }
  async componentDidMount() {
    const response = await fetch("http://localhost:3004/getUrlImages");
    const newList = await response.json();
    this.setState(previousState => ({
      ...previousState,
      urlImages: newList,
     }));
  }

  galleryPhotos() {
   if(this.state.urlImages) {
      return this.state.urlImages.map(function(urlimage) {
         return { src: urlimage.urlimage, width: 2, height: 2 }
      })
   }
}

  async onClick(event) {

    const rawObj = await fetch("http://localhost:3004/getCollectionFromUrlImage?urlimage="+event.target.src);
    const obj = await rawObj.json();

    const response = await fetch("http://localhost:3004/getUrlImagesFromCollection?collection="+obj[0].nom);
    const newList = await response.json();

    this.setState(previousState => ({
      ...previousState,
      urlImages: newList,
     }));
  }

  render() {
    return (
      <Gallery axis={"xy"} photos={this.galleryPhotos()} onClick={this.onClick}/>
    )
  }
}
const photos = [];
export default PhotoGallery;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

我的 json 的响应是：

[{"nom":"Cartes"}]

console.log 显示：

0: {nom: "Cartes"}

length: 1

__proto__: Array(0)

BUUT alert(obj) 显示 undefined。

有什么帮助吗？我希望 obj 等于“Cartes”..

提前谢谢大家:)

Answer 1

您需要await 第一次提取，就像您对第二次所做的那样：

const rawObj = await fetch("http://localhost:3004/getCollectionFromUrlImage?urlimage="+event.target.src);
const obj = await rawObj.json();

onClick 方法中的第二次获取在您的服务器有机会响应第一次获取之前运行，因为您没有 await 它。