Заполнить поле input из json-а?

Question

[aznhautroalvyl]

В компонент приходит значение id, по которому необходимо вывести в input соответствующее ему значение. Данные для заполнения приходят с fetch запроса и хранятся в виде {id: 1, value: 'Test'}.
По факту input остаётся пустым.
Пробовал добавлять async / await - не получилось

Исходный компонент:

class TestPage extends Component {
  constructor(props) {
    this.state = {     
      data: []
    };   
  }

  async componentDidMount() {  
    this.getValueForInput();
  }

  getValueForInput() { 
    this.onHandleFetch(this.props.params.idValue); // передача id
    console.log(this.state.data); // здесь не выводятся данные
    return this.state.data.value; // возвращаем значение, полученное по id
  }

  onHandleFetch(id) {
    fetch( ... )
      .then(newData =>
        this.setState({ data: newData }) // получаем значение вида [{id: 1, value: 'Test'}]
      );
  }

  render() {
    console.log(this.state.data); // здесь выводятся данные
    return (
     ...
              <InputForm getValueForInput={this.getValueForInput} data={this.state.data}
     ...        
}

Input:

class InputForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value1: ''
    };
    ...
  }

  componentDidMount() {
    this.setValue(); // установить значение в input
  }

  setValue() {
    console.log(this.props.getValueForInput()); // ничего нет
    this.setState({ value1: this.props.getValueForInput() });   
  }

  render() {
   ...
            <input  type='text' required value={this.state.value1}  />       
 ... }    
InputForm.propTypes = {
  getValueForInput: PropTypes.func,
  data: PropTypes.array
};      
}

Answer 1

[Владимир Проскурин]

Не надо копировать пропсы компонента в локальный state. Уберите setValue, просто работайте с данными props.data реактивно.
К тому же, у вас onHandleFetch - это асинхронный метод, а вы пытаетесь получить результат его работы сразу

getValueForInput() { 
    this.onHandleFetch(this.props.params.idValue); // передача id
    console.log(this.state.data); // здесь не выводятся данные
    return this.state.data.value; // тут тоже не получается значение, т.к. onHandleFetch его еще не успел подготовить
  }

Comments

[aznhautroalvyl]

просто работайте с данными props.data

setValue убрал, изменил input так:

<input  type='text' required value={this.state.data.value}  />

Всё сработало, но нет возможности редактировать input.
Вообще задача состоит в том, чтобы подгрузить значение value в input, отредактировать его и сохранить изменённое значение (при нажатии на кнопку).
Судя по официальной документации, мне для редактирования input необходимо это локальное состояние value1.
При возвращении setValue снова не приходит значение value.
Как можно это реализовать?

[Владимир Проскурин]

aznhautroalvyl, для изменения значений родительского компонента, нельзя менять его напрямую, нужно у дочернего компонента в input на onchange/oninput вызывать событие родительского компонента, и там уже в родительском компоненте менять значение.

[aznhautroalvyl]

Владимир Проскурин, добавил в родительский компонент:

onChangeInputValue(newInput) {
    this.setState({ newValue: newInput }); 
    // newValue переменная, в которую хотел записать новое значение, потому что запись в data.value не работает
    console.log(newInput);
  }

В дочернем компоненте с input добавил обработчик на изменение:

handleChange(event) {
    this.props.onChangeInputValue(event.target.value);
  }

В результате input всё равно не редактируется. Что я не так делаю?
Как мне в {id: 1, value: 'test', name: 'hello' ...} внести изменения для конкретного поля value?
Я, кажется, окончательно запутался

[aznhautroalvyl]

Владимир Проскурин, всё, разобрался. Не могу сказать, насколько я правильно сделал, но получилось так:
В дочернем компоненте

handleChange(event) {
    this.props.onChangeInputValue(event.target.value);
  }
...
<input type='text' required value={this.props.newValue}
           onChange={this.handleChange}
            />

В родительском оставил:

onChangeInputValue(newInput) {
    this.setState({ newValue: newInput });    
  }

Спасибо!

[Владимир Проскурин]

aznhautroalvyl, да, все правильно.

[aznhautroalvyl]

Владимир Проскурин, Хотел ещё уточнить один момент: иногда в компонент, при его открытии, не передаются params, т.е. this.props.params.idValue не существует. Из-за этого возникает ошибка

Uncaught TypeError: Cannot read property 'idParty' of undefined

Как-то можно избавиться от этой ошибки?

[Владимир Проскурин]

aznhautroalvyl, до того места, где вы читаете этот параметр, поставьте эту строчку
console.warn(this.props);
откройте консоль и посмотрите, какие поля вообще передаются.

[aznhautroalvyl]

Владимир Проскурин,

Когда передаётся значение

{history: {…}, location: {…}, params: {…}, route: {…}, routeParams: {…}, …}
children: {$$typeof: Symbol(react.element), type: ƒ, key: null, ref: null, props: {…}, …}
history: {listenBefore: ƒ, listen: ƒ, transitionTo: ƒ, push: ƒ, replace: ƒ, …}
initialName: "Аноним"
location: {pathname: "/test/182", search: "", hash: "", state: null, action: "PUSH", …}
params: {idValue: "182"}
route: {component: ƒ, path: "party", childRoutes: Array(1)}
routeParams: {}
routes: (3) [{…}, {…}, {…}]

Когда НЕ передаётся

{history: {…}, location: {…}, params: {…}, route: {…}, routeParams: {…}, …}
children: null
history: {listenBefore: ƒ, listen: ƒ, transitionTo: ƒ, push: ƒ, replace: ƒ, …}
initialName: "Аноним"
location: {pathname: "/test", search: "", hash: "", state: null, action: "POP", …}
params: {}
route: {component: ƒ, path: "test", childRoutes: Array(1)}
routeParams: {}
routes: (2) [{…}, {…}]
__proto__: Object

Во втором случае в params пусто

[Владимир Проскурин]

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

[aznhautroalvyl]

Владимир Проскурин, в компоненте, из которого у меня передаётся значение, я использую context router

checkDoubleClick() {
    this.context.router.push(`/test/${this.state.selectedDirectory.id}`);
  }

В компоненте, куда я посылаю это значение (this.props.params.idValue), я не сохраняю его в state, а сразу отправляю для fetch запроса. Потому и получается, что this.props.params.idValue === undefined и запрос не выполняется

componentDidMount() {
   this.onHandlePartyFetch(this.props.params.idParty);
}

Что-то можно сделать? Я так понимаю, реакт реагирует просто на наличие в коде переменной this.props.params.idParty, о существовании которой он не знает