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

Question

使用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)

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

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

Answer 1

来自@Ajeet Shah

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

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