как получить обновленный реквизит в реагировать JS?

Question

Не могли бы вы сказать мне, как получить обновленный реквизит в реагировать JS?. Я знаю, componentWillReceiveProps это unsafe, и я пытался использовать getDerivedStateFromProps, но не работает

вот мой код https://codesandbox.io/s/rm30zoonk4

Через две секунды я обновляю свое состояние, которое переходит к props

Expected output after two second

abcsssss

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.src !== "") {
      return { src: nextProps.src };
    } else return null;
  }

Answer 1

Вы должны использовать componentDidUpdate (prevProps, prevState)

componentDidUpdate вызывается каждый раз, когда компонент собирается получить новые реквизиты или внутреннее состояние, здесь вы можете вмешаться до того, как компонент будет перерисован.

Таким образом, в hello.js вместо getDerivedState:

componentDidUpdate(prevProps) {
  if (prevProps.src !== this.props.src) {
    this.test()
  }
}

выполняется сравнение «if (prevProps.src! == this.props.src)», поэтому компонент обновляется только в случае изменения свойства src,предотвращение ненужных повторов.

Answer 2

Вы можете использовать componentDidUpdate

componentDidUpdate () вызывается сразу после обновления.

https://reactjs.org/docs/react-component.html#componentdidupdate

class Hello extends Component {
    state = {
        name: ""
    }
    componentDidUpdate(prevProps) {
        if (this.props.src !== prevProps.src) {
            this.setState({name: this.props.src + 'ssss'});
        }
    }
    render() {
        return <div>{this.state.name}</div>;
    }
}