反应从 url 加载 svg 图像

Question

我正在从通过src道具传入的 url 加载 svg 图像。

我遇到的问题是我将 svg 存储到状态，但是当 url 更改时，显示的图像将是单击的上一个图像而不是当前图像

我可以看到 state 中存储的图像始终是最后选择的图像

我相信它是如何从 api 获取图像并将其存储到 state 中的，但我不太明白这是如何工作的以及它如何使用 svg 更新状态

).then(
   svg => this.state.image = svg
);

如何更改此设置以便使用正确的图像更新状态？

SVG 组件

import React from 'react';
import fetch from 'isomorphic-fetch';
import $ from 'jquery';

class InlineSVG extends React.Component {
  state = {
    image: '',
  };


  componentDidUpdate(prevProps) {
    this.loadSVG();
  }


  loadSVG() {
      fetch(this.props.src)
        .then(
          response => {
            if (!response.ok) return Promise.reject(new Error('Server 
Error'));
            return response.text();
          }
        ).then(
          svg => this.state.image = svg
        );
  }


  render() {
    return (
      <div>
      <div dangerouslySetInnerHTML={{__html: this.state.image}} />
      </div>
    );
  }
};

export default InlineSVG

Answer 1

永远不要直接改变状态。 您正在直接改变状态，这就是您看不到更新图像的原因。 当您直接改变状态时，您的组件不会重新渲染，这就是未显示更新图像的原因

错误的

).then(
    svg => this.state.image = svg);

对

 ).then(
    svg => this.setState({ image:  svg});

PS：- 要修改 React 状态值，您需要使用 setState 以便您的组件将使用更新后的数据重新渲染