javascript - 从 url react 加载 svg 图像

Question

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

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

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

我相信它是如何从 api 获取图像并将其存储到 state here 但我不太明白它是如何工作的以及它如何使用 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 以便您的组件将使用更新后的数据重新呈现