React/Redux 无法访问数组中对象的属性

Question

使用 React 和 redux 工具包。

我有一个允许用户创建项目的表单。 post 请求必须遵守相关的猫鼬项目架构。

表单条目与以下状态值相关：

  const [name, setName] = useState('');
  const [imageURL, setImageURL] = useState('');
  const [brand, setBrand] = useState('');
  const [category, setCategory] = useState('');
  const [description, setDescription] = useState('');
  const [barcode, setBarcode] = useState('');
  const [countInStock, setCountInStock] = useState('');
  const [message] = useState(null);
  const [uploading, setUploading] = useState(false);
  const [uploadFile, setupLoadFile] = useState('');

我不希望人们组成自己的类别，所以我有一个单独的类别 mongodb table，我将其填充到这样的表格中

          <Form.Group controlId='category'>
            <Form.Label>Category</Form.Label>
            <Form.Control
              as='select'
              type='category'
              placeholder='enter Category'
              value={category}
              onChange={(e) => setCategory(e.target.value)}>
              {categories.map((category) => {
                return <option key={category._id}>{category.name}</option>;
              })}
            </Form.Control>
          </Form.Group>

问题是加载表单时默认显示第一个类别选项，但该选项未设置为类别。因此，如果用户填写表单但未触及类别下拉选项并点击提交，则数据将以未定义的类别发送，即使对用户来说它看起来像是选择了第一个类别。

我试过两种方法解决这个问题：

让表单触发 setCategory 加载类别默认显示（这不起作用）
获取第一个类别名称并将其添加到 useState 中，如下所示：

  const categories = useSelector(getAllCategories);
  let firstCat = categories[0]; //this works
  let firstCatName = firstCat.name; //this fails
  const [category, setCategory] = useState(firstCatName)

这种方法失败了，因为出于某种原因，试图获取第一个类别的名称会触发错误：找不到属性未定义的名称，即使对象在那里并且我可以通过类别数组进行映射在表格中。

知道我做错了什么吗？

Answer 1

来自@Ajeet Shah

useEffect(() => { 
if (categories.length > 0) { 
setCategory(categories[0].name) 
} }, [categories])

我没想到你可以在一个页面中使用两次 useEffect，显然你可以！

React/Redux 无法访问数组中对象的属性

React/Redux can’t access properties of object in an array

reactjs

redux

react-redux

redux-toolkit