Сначала мы сохраним текущий реквизит как prevProps в состоянии вашего компонента. Затем мы будем использовать метод класса статических компонентов getDerivedStateFromProps, чтобы обновлять ваше состояние в зависимости от ваших реквизитов. Он вызывается так же, как componentDidUpdate, и возвращаемое значение будет вашим новым состоянием компонента.
Исходя из вашего кода, я предполагаю, что ваш this.props.objResponse.bar исходит из ответа API, как видно из вашего комментария
Я не помещал этот код в конструктор, потому что этот объект не определен в конструкторе
Если возможно, лучше использовать функциональный компонент с перехватчиками React вместо использованиякласс в будущем.
Вот несколько чистых примеров кода для справки.
<code>import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class FooBarBazComponent extends React.Component {
constructor(props) {
super(props);
const { foo, bar } = props;
this.state = {
// save previous props value into state for comparison later
prevProps: { foo, bar },
foo,
bar,
}
}
static getDerivedStateFromProps(props, state) {
const { prevProps } = state;
// Compare the incoming prop to previous prop
const { foo, bar } = props;
return {
// Store the previous props in state
prevProps: { foo, bar },
foo: prevProps.foo !== foo ? foo : state.foo,
bar: prevProps.bar !== bar ? bar : state.bar,
};
}
handleOnChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
}
renderInput = (name) => (
<div>
<label>
{`${name}:`}
<input onChange={this.handleOnChange} type="text" name={name} value={this.state[name]} />
</label>
</div>
)
render() {
const { prevProps, ...rest } = this.state;
return (
<section>
{this.renderInput('foo')}
{this.renderInput('bar')}
<div>
<pre>FooBarBazComponent State :
{JSON.stringify(rest, 4, '')}
);}} класс App extends React.Component {// Это будет имитировать вызов API mockAPICall = () => new Promise ((res) => setTimeout (() => res ('bar'), 1000));state = {bar: ''} async componentDidMount () {const bar = await this.mockAPICall ();this.setState ({bar});} render () {const {bar} = this.state;вернуть ()}} const rootElement = document.getElementById ("root");ReactDOM.render (, rootElement);
Надеюсь, это даст вам общее представление о том, как это сделать.
Рабочий пример: https://codesandbox.io/s/react-reactive-state-demo-2j31u?fontsize=14