Question

我正在从通过src道具传递的网址中加载svg图片。

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

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

我相信这是它从api获取图像并将其存储到此处状态的方式，但是我不太了解它是如何工作的以及如何使用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，以便您的组件将使用更新后的数据重新呈现

从URL反应加载svg图像

1 个答案: