ReactJS 根据选择获取数据

Question

我得到了这个应用程序，其类别和子类别存储在 MongoDB 中。我想要的是每当用户在下拉菜单中选择一个类别时，它旁边会有另一个包含子类别的下拉菜单，具体取决于我想要显示属于类别选择的子类别的选择。

例如，我们有 2 家汽车制造商：福特和菲亚特

如果选择福特，我想在第二个下拉菜单中加载该品牌的汽车，如果选择另一个，则加载菲亚特汽车。

现在我需要通过从 API 获取数据并将其加载到客户端来完成所有这些工作。

在我看来，我看到了两种可能的解决方案：一种是获取所有内容并检查它所属的位置，然后创建一个新数组，该数组将根据选择将数据发送到下拉列表。第二个选项是为每个选择从 API 中获取数据并将其推送到下拉列表。

我觉得这两种解决方案都超出了我的能力范围，因为我找不到一个不昂贵的功能来完成所有事情，或者我现在太困惑了，解决方案可能很简单，但我有点迷茫。

这是我的组件的代码：

import { useState } from 'react'
import MUI Components...

//DATA FETCHING
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { listCategories } from '../../../redux/categories/categoriesActions'
import { listSubcategoriesByCategory } from '../../../redux/subcategories/subcategoriesActions'

export default function NewProduct() {
  const dispatch = useDispatch()
  const categoriesList = useSelector((state) => state.categoriesList)
  const subcategoriesList = useSelector((state) => state.subcategoriesList)
  const { loading, error, categories } = categoriesList
  const { subcategories } = subcategoriesList

  useEffect(() => {
    dispatch(listSubcategoriesByCategory(values.category))
    dispatch(listCategories())
  }, [dispatch])

  const [values, setValues] = useState({
    category: ``,
    subcategory: ``,
    name: '',
  })
  
  const handleChange = (prop) => (event) => {
    setValues({ ...values, [prop]: event.target.value })
    // Somewhere here I should set the state of the subcategories dropdown menu
  }

  return (
    <>
     <div>
      <FormControl>
       <Grid>
        <TextField
         value={values.category}
         onChange={handleChange('category')}>
          {categories.map((category) => (
           <MenuItem key={category._id} value={category.name}>
            category.name}
           </MenuItem>
          ))}
         </TextField>
        </Grid>
        <Grid item xs={6}>
         <TextField
          value={values.subcategory}
          onChange={handleChange('subcategory')}>
           {subcategories.map((subcategory) => (
            <MenuItem key={subcategory._id} value={subcategory.name}>
             {subcategory.name}
            </MenuItem>
           ))}
          </TextField>
         </Grid>
      )}
    </>
  )
}

目前非常需要和感谢任何建议。

提前致谢！

Answer 1

您是否尝试过在第一个下拉列表中使用依赖数组使用 useEffect？当类别更改时，您可以获取子类别。我也在自己的项目中这样做，但以前从未使用过 redux。

useEffect(() => {
   //fetch
}, [category])

Answer 2

非常感谢大家花时间回复并查看我的问题。答案一直在我的代码中，但正如我所说，我猜工作时间太长会使你的视线模糊。

解决方法很简单。

我没有在挂载组件时获取子类别，而是像这样在 handleChange 函数中获取子类别：

  const handleChange = (prop) => (event) => {
    setValues({ ...values, [prop]: event.target.value })
    dispatch(listSubcategoriesByCategory(event.target.value))

我们在选择类别时无论如何都会获得选定的值，我们已经有一个 api GET 请求通过传递类别来获取子类别，这就是我在句柄更改中所做的。我选择一个类别，将类别传递给 redux 函数，然后获取属于所选类别的任何子类别。

再次抱歉打扰您，感谢您的回复<3

ReactJS 根据选择获取数据

ReactJS fetch data depending on selection

javascript

reactjs

redux

react-redux

react-hooks