Question

我在react中有一个o元素列表，对于每一个我想发出GET请求以便接收图像的元素。

我试图制作一个调用GET端点的异步方法。该请求有效，但未显示图片。

此外，我尝试直接在src JSX代码中发出请求。同样的问题

src={getLessonPicture(lesson.lesson.name)}

export function getLessonPicture(lessonName) {
    return request({
        url: API_BASE_URL + "/downloadLessonPhoto/" + lessonName,
        method: 'GET'
    });
}

    async getPhoto(name){

        let image;

        getLessonPicture(name)
            .then(response  => {
                this.image = response;

            });

        await this.sleep(2000);

        return this.image;
        // return image;
    }

你能使我理解我错了吗。谢谢你

Answer 1

我假设request函数中的getLessonPicture返回Promise。您无法将图像上的src属性设置为Promise。您可以使用await Promise或使用.then回调，然后将src属性设置为所获得的值。

我认为这是您尝试使用getPhoto方法执行的操作，但是您应该真正使用this.setState更新状态，而不是将属性直接放在实例上（例如this.image = response）

您尚未共享您的整个组件，但是也许可以进行以下操作：

function getLessonPicture(lessonName) {
  return new Promise((resolve) => {
    setTimeout(() => resolve('https://unsplash.it/200/200'), 1000);
  });
}

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      image: '',
    };
  }
  
  componentDidMount() {
    getLessonPicture().then((image) => {
      console.log(image);
      this.setState({ image });
    });
  }
  
  render() {
    return (
      <div>
        <h1>Hello, World</h1>
        <img src={this.state.image } />
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如何直接在jsx“ src”中发出http请求

1 个答案: