В компонент приходит значение 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
};
}
