时间戳

首页 > 解决方案 > 反应从 url 加载 svg 图像

javascript - 反应从 url 加载 svg 图像

问题描述

我正在从通过srcprop 传入的 url 加载 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

标签： javascriptreactjssvg

解决方案

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

错误的

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

对

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

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

推荐阅读