Блог

У меня есть компонент, в котором в componentDidMount методе я извлекаю информацию из серверной части и помещаю ее в состояние моего компонента. Однако мне нужно изменить ответ, чтобы использовать объекты, поступающие из серверной части, в компоненте Select из пользовательского интерфейса material. Я делаю это так:

 var toAdd = []
axios.get(...).then(response.data.forEach(p => toAdd.push({id: p.name, value: p.name}))})
...
this.setState({schemas: toAdd})
 

Затем, используя метод рендеринга, я отправляю схемы из состояния в компонент формы. Сама форма также имеет набор входных полей с компонентом выбора.

У меня следующее предупреждение:

Материал-пользовательский интерфейс: вы указали значение, выходящее за пределы диапазона undefined , для компонента select (name =»schema»). Рассмотрите возможность предоставления значения, соответствующего одному из доступных параметров или «. Доступные значения «».

Я сделал консоль.журнал и первое значение, которое я получаю, — это массив [], но с объектами внутри. После того, как я что-то напишу в полях ввода, массив изменится на [{…}], а затем Select может отображать нужные мне параметры. Первый массив [] не пуст, если я открою его на консоли, внутри будет один объект. То же самое касается [{…}] . Я что-то делаю не так?

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

   state={toAdd:[]}
 

затем при извлечении данных вы просто устанавливаете свое состояние следующим образом
this.setState({toAdd:... response.data.map(v=> {return{id:v.name,value:v.value}})