setState не работает, когда используется функция, переданная через реквизит

Question

У меня есть компонент React (App.js), который выполняет запросы ajax (через axios).Значения параметров, передаваемых через эти запросы, берутся из полей ввода, которыми манипулирует пользователь.На основании ответа он обновляет свое состояние.

sendValue(value) {
  const url = `${myURl}/c${value}\r`;
  axios.get(url)
        .then(res=>{
              this.setState({
                       data:res.data
              })
         })
         .catch(err => {
            console.log('err', err);
         })  
}

И затем в операторе возврата эта функция передается в качестве подпорки дочернему компоненту:

<Child sendValue={this.sendValue}>

Дочерний компонент (Child.js) имеет пару полей ввода,Этот дочерний компонент имеет свое собственное состояние.При изменении полей ввода значения будут переданы функции axios через реквизиты.

handleChange(e) {
      const { value } = e.target;
      this.setState({ input: value }, console.log('state', this.state));
      this.props.sendValue(`${value}\r`);
}

Фактический элемент ввода выглядит следующим образом:

<input
    value={this.state.value}
    onChange={this.handleChange}
 />

Если я опускаю эту строку this.props.sendValue(${value}\r);, состояние обновляется, и значение полей ввода изменяется (консоль.log как функция обратного вызова доказывает это, а также то, что фактическое значение поля ввода изменяется).Но когда я оставляю это, ничего не меняется, состояние никогда не обновляется, console.log никогда не вызывается.

Почему?

Как мне это исправить?

Answer 1

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

class Child extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      value: 'init-value' // or null
    }

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
   ....
  }

  render() {
    return (
      ....
      <input value={this.state.value} onChange={this.handleChange} />
      ....
    );
  }
}

this.props.sendValue - функция, переданная (принадлежит)Родительский компонент и включает в себя оператор setState.Если бы он был запущен, произошел бы повторный рендеринг родительского компонента.

В функции handleChange(e) после

this.setState({ input: value }, console.log('state', this.state));

, которая изменяет состояние дочернего элемента

this.props.sendValue(`${value}\r`);

повторно визуализировать родительский компонент, и, конечно, в него вовлечен Child. Поэтому значение state снова инициализируется, и, похоже, ничего не происходит.

Может быть, вы хотите использовать реквизит из родительского компонента, чтобы придать значение state.value.