Данные ComboSelection MaterialUI ReactJs Api
Я новичок в реагировании и использую поле со списком материалов пользовательского интерфейса (компонентов) для отображения выбранных данных из API.
Это мой код:
this.state = { data: [] , dataValue: ''}
componentDidMount() {
this.props.getAllData().then(data => this.setState({data})}
render() {
return (
<FormControl variant = "filled">
<InputLabel htmlFor = "filled-age-native-simple">DATA</InputLabel>
<Select
native
value = {this.state.dataValue}
onChange = {this.handleChangeEvent('dataValue')}
input = {<FilledInput name = "dataValue" id = "filled-age-native-simple" />}>
// Problem solved
{this.state.data.map(dataV => {
return (
<option value = {dataV.id}> {dataV.name} </option>
);
})}
</Select>
</FormControl>
Каждый раз, когда вы выбираете значение, состоянию присваивается идентификатор.
Реализуя это, я получаю эту ошибку:
Invalid prop
childrensupplied toSelect, expected a ReactNode.
in Select (created by Context.Consumer)
кто-нибудь знает, как решить эту проблему? Спасибо
Ответы 1
Когда вы инициализируете состояние - вы можете сделать это только с имеющимися значениями, так сказать. Вы не можете использовать значение на основе обещания, как вы пытаетесь сделать:
this.state = { data: this.props.getAllData(), dataValue: ''}
Во-вторых, при рендеринге компонентов вам также необходимо иметь все данные для рендеринга. В частности, вы не можете сделать это:
render() {
return <el>{this.state.data.then(...
Если вам нужно обрабатывать асинхронные вызовы данных в вашем компоненте, вы должны использовать функцию componentDidMount (или конструктор), чтобы инициировать вызов.
Например:
componentDidMount() {
this.props.getMyData().then(data => this.setState({data}) )
}
При вызове setState это вызовет повторную визуализацию вашего компонента и может использовать данные, которые вы только что сохранили в состоянии.
опечатка наверное? значение = {dataV.id}
Я пытался, даже объявляя <option value = {1}>Test</option> внутри карты, все равно было пусто.
хорошо, тогда, вероятно, ваш массив данных пуст - console.info(this.state.data) в вашей функции рендеринга для проверки
Я сделал, он становится пустым, пустым, пустым, а затем пустым с данными, что странно.
это ожидаемо - ваш компонент будет отображаться несколько раз, прежде чем данные станут доступны. Тогда последний раз должен быть, когда ваши данные там.
последний массив содержит данные. Это потому, что параметры принимают только первый пустой массив?
нет, компонент должен обновляться при каждом повторном рендеринге, но я не могу вам помочь, не видя ваш новый код - возможно, создайте новый вопрос с вашим новым кодом
каково тогда точное содержимое this.state.data?
Я исправил проблему, и я обновлю код с исправленной проблемой.
Хорошо, пожалуйста, отметьте как правильный, так как я исправил вашу первоначальную проблему.
Я внес изменения, попытался установить значение параметров, подобное этому {this.state.data.map(dataV => {<option value{dataV.id}> {dataV.name} </option>})}, но параметр значения пустые, в чем может быть проблема? не отображает данные в опции?