Question

这个问题可能是重复的，也可能是琐碎的，但我似乎无法解决。

我正在React.js应用程序中使用Matrial-UI来实现这样的下拉列表。

<Select native value={this.state.contractType} onChange={this.handleChange} input={<OutlinedInput id="contractType"/> }>
    {this.fetchContractTypes}
</Select>

fetchContractTypes从数据库获取下拉值。

fetchContractTypes = async () => {
    const dropDownValues = await ProjectAPI.getDropDownValues();
    const contractValues = dropDownValues.filter(value => value.type === 'contract');
    const data = [];
    contractValues[0].value.map(val => {
        data.push(<option key={val.id} value={val.id}>{ val.name }</option>)
    });
    console.log(data);
    return data;
}

我可以看到下拉值是在浏览器控制台窗口中获取的，但是没有绑定项目。知道我如何进行这项工作吗？

Answer 1

在渲染之前获取数据并将其置于组件状态

我建议您在使用基于类的组件的useEffect挂钩（如果使用挂钩）或componentDidMount（）中获取数据。然后将获取的值设置为sate，并在render方法中引用您的状态。

componentDidMount(){
    this.fetchContractTypes()
}

在您的fetchContractTypes()

中设置状态

fetchContractTypes = async () => {
    const dropDownValues = await ProjectAPI.getDropDownValues();
    const contractValues = dropDownValues.filter(value => value.type === 'contract');
    const data = [];
    contractValues[0].value.map(val => {
        data.push(<option key={val.id} value={val.id}>{ val.name }</option>)
    });
    this.setState({contractTypes: data});
}

渲染中的参考状态

<Select native value={this.state.contractType} onChange={this.handleChange} input={<OutlinedInput id="contractType"/> }>
    {this.state.contractTypes}
</Select>

动态绑定下拉项Material-UI

1 个答案: