时间戳

首页 > 解决方案 > 材质 UI 选择不显示选项

reactjs - 材质 UI 选择不显示选项

问题描述

我有一个组件，在该componentDidMount方法中，我从后端获取信息并将其置于组件的状态中。但是，我必须更改响应才能使用来自 Material UI 的 Select Component 上后端的对象。我这样做：

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

然后，在渲染方法上，我将模式从状态发送到表单组件。表单本身也有一组带有选择组件的输入字段。

我有以下警告：

undefinedMaterial-UI：您为 select (name="schema") 组件提供了超出范围的值。考虑提供与可用选项之一或“”匹配的值。可用值为“”。

我做了console.log，我得到的第一个值是一个数组[]，但里面有对象。在输入字段上写一些内容后，数组变为 [{...}] 然后 Select 可以显示我想要的选项。第一个数组 [] 不为空，如果我在控制台上打开它，里面有一个对象。[{...}] 也是如此。有什么我做错了吗？

标签： reactjsmaterial-ui

解决方案

当你像这样从 API 获取数据时，为什么不使用组件状态来获取数据。

  state={toAdd:[]}

然后在获取数据时，您只需像这样设置您的状态 this.setState({toAdd:... response.data.map(v=> {return{id:v.name,value:v.value}})

推荐阅读