reactjs - 如何使用反应钩子添加级联下拉菜单？

Question

我是新来的反应。我想做一个级联下拉菜单。我使用反应钩子绑定下拉列表的值。我在后端使用了 Web API 和 .net 核心。现在如何根据区域值显示经销商点值？请检查此代码并就如何创建级联下拉列表给我一个建议。提前致谢

这是我的代码：

const [resultZone, lstZone] = useState([]);
useEffect(() => {

    fetch('http://localhost:61808/api/Zone', {
        method: 'Get',
        headers: {
            'Content-Type': 'application/json',
        }
    })
        .then(resp => resp.json())
        .then(resp => lstZone(resp))
      
}, [])

const [resultDealer, lstDealer] = useState([]);
useEffect(() => {
    if(resultZone){
       
    fetch('http://localhost:61808/api/Dealer', {
        method: 'Get',
        headers: {
            'Content-Type': 'application/json',
        }
    })

        .then(resp => resp.json())
        .then(resp => lstDealer(resp))
}
}, [])

return (
    <form autoComplete="off" noValidate className={classes.root} onSubmit={handleSubmit}>
     
                <InputLabel style={{ display: 'block' }} className={classes.FormControl}>Dealer Point</InputLabel>

                <FormControl variant="outlined"
                    className={classes.FormControl}>

                    <Select name="dealerId"
                        value={values.dealerId}
                        onChange={handleInputChange}>
                        <MenuItem value="">Select Dealer</MenuItem>
                        {
                            resultDealer.map(x => {
                                return (
                                    <MenuItem value={x.id}>{x.name}</MenuItem>

                                )
                            })

                        }

                    </Select>
                </FormControl>

             <InputLabel style={{ display: 'block' }} className={classes.FormControl}>Zone</InputLabel>

                <FormControl variant="outlined"
                    className={classes.FormControl}>

                    <Select name="zoneId"
                        value={values.zoneId}
                        onChange={handleInputChange}>
                        <MenuItem value="">Select Zone</MenuItem>
                        {
                            resultZone.map(x => {
                                return (
                                    <MenuItem value={x.id}>{x.name}</MenuItem>

                                )
                            })

                        }

                    </Select>
                </FormControl>                
    </form >

);

标签： reactjsreact-hooksuse-effectuse-state