реагировать нагрузка svg изображение с URL

Question

Я загружаю изображение SVG из URL, переданного через src prop.

Проблема, с которой я столкнулся, заключается в том, что я сохраняю 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, чтобы ваш компонент рендерился с обновленными данными