React/Redux无法访问数组中对象的属性
提问于 2021-06-05 20:46:27
使用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表，我把它填充到下面的表单中
<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>问题是，在加载表单时，第一个类别选项显示为默认选项，但该选项未设置为类别。因此，如果用户填写表单，并且不触摸类别下拉选项和点击submit，数据将以未定义的类别发送，即使在用户看来，第一个类别是被选中的。
我曾尝试用两种方法解决这个问题：
- 使表单触发器setCategory在加载时带有默认显示的类别(这不起作用)，
- 获取第一个类别名称，并将其添加到useState中，如下所示：
const categories = useSelector(getAllCategories);
let firstCat = categories[0]; //this works
let firstCatName = firstCat.name; //this fails
const [category, setCategory] = useState(firstCatName)这种方法失败了，因为由于某种原因，试图获取第一个类别的名称会触发一个错误，即无法找到未定义的属性名称，即使对象在那里，而且我可以通过表单中的类别数组进行映射。
你知道我在这里做错什么了吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-06-06 14:23:55
@Ajeet Shah
useEffect(() => {
if (categories.length > 0) {
setCategory(categories[0].name)
} }, [categories])我没有意识到你可以在一个页面中使用useEffect两次，显然你可以！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67855867
复制相关文章
点击加载更多
腾讯云开发者
