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它。

ReactJS将获取的输出保存到var？

1 个答案: