时间戳

首页 > 解决方案 > React/Redux 无法访问数组中对象的属性

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

问题描述

使用 react 和 redux 工具包。

我有一个允许用户创建项目的表单。发布请求必须遵守相关的猫鼬项目模式。

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

  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 表，我将其填充到这样的表单中

          <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>

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

我试图通过两种方式解决这个问题：

  1. 使用默认显示的类别加载表单触发器 setCategory（这不起作用）
  2. 获取第一个类别名称并将其添加到 useState，如下所示：
  const categories = useSelector(getAllCategories);
  let firstCat = categories[0]; //this works
  let firstCatName = firstCat.name; //this fails
  const [category, setCategory] = useState(firstCatName)

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

知道我在这里做错了什么吗？

标签： reactjsreduxreact-reduxredux-toolkit

解决方案

来自@Ajeet Shah

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

我没有意识到你可以useEffect在一页中使用两次，显然你可以！

推荐阅读