反應從 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 以便您的組件將使用更新后的數據重新渲染