反应：无法读取表单中选择中未定义的属性'map'

Question

我有 React 应用程序。在这个应用程序中，我有带有帖子的页面。这篇文章我可以创建，编辑，删除。现在我制作了使用方法POST(组件添加.js在本地服务器中创建新帖子的form。在此表单中，用户可以在选择category of image中写入title、description、attach image和选择。这个类别我使用方法GET从本地服务器获得。

---

但是当我单击从组件AddPost.js提交按钮时，出现错误：

无法读取未定义的属性"映射"

在组件中选择类别.js(在表单中选择(

---

奇怪的是组件EditPost.js运行良好，尽管它几乎与组件addPost.js相同，除了apiImage函数中的路径和 API 方法除外

我在文件addPost.js或文件Post.js(父组件(中写错了什么？

来自服务器的响应(我在const data中得到的类别列表(：

{"data":
[{"id":20,"title":"auto"},
{"id":21,"title":"sport"},
{"id":23,"title":"new"}
]}

添加帖子.js：

const AddPost = (props) => {
const formRef = useRef();
const handleSubmit = async (event) => {
const data = new FormData(formRef.current);
data.append('category_id', props.category);
event.preventDefault();
const response = await apiImage(`${imageRoute}`, {
method: 'POST',
body: data,    
});};
return (
<div>
<form onSubmit={handleSubmit} ref={formRef}>
<input className="input-title" type="text" name="title"/>
<SelectCategory upadateSelectCategory={props.upadateSelectCategory} categories={props.listCategories} value={props.category} />
<input className="input-description" type="text" name="description"/>
<input type="file" name="image" accept="image/*"/>
<button type="submit">Add</button>
</form>
</div>
);
};

编辑帖子.js(效果很好(：

const EditPost = (props) => {
const formRef = useRef();
const handleSubmit = async (event) => {
const data = new FormData(formRef.current);
data.append('category_id', props.category);
event.preventDefault();
const response = await apiImage(`${imageRoute}/${props.numberIdEdit}`, {
method: 'PUT',
body: data,    
});  
};
return (
<div>
<form onSubmit={handleSubmit} ref={formRef}>
<input className="input-title" type="text" name="title"/>
<SelectCategory upadateSelectCategory={props.upadateSelectCategory} categories={props.listCategories} value={props.category} />
<input className="input-description" type="text" name="description"/>
<input type="file" name="image" accept="image/*"/>
<button type="submit">Edit</button>
</form>
</div>
);
};

选择类别.js：

export default (props) => {
return (
<div>
<select onChange={props.upadateSelectCategory} value={props.value}>
<option value="">-- Category --</option>
{props.categories.map(item => <option value={item.id} key={item.id}>{item.title}</option>)}  
</select> 
</div>
);
}

后.js(主要组成部分(：

const Post = () => {
const [value, setValue] = useState({
listImage: [],
category: '',
listCategories: [],
numberIdEdit: '',
});
useEffect(() => {
fetchListCategory(); 
}, []);
async function fetchListCategory() {
const data = await api(`${listRoute}`, {method: 'GET'});
setValue(prev => ({
...prev,
listCategories: data.data,
}));
}
useEffect(() => {
fetchDataPost(); 
}, []);
async function fetchDataPost() {
try {
const data = await apiImage(`${imageRoute}`, {method: 'GET'});
setValue(prev => ({
...prev,
listImage: data.data,
}));
}
return (
<div>
<DisplayPost dataAttribute={value.listImage}
selectNumberIdEdit={selectNumberIdEdit}       
/>
<AddPost closeModalAdd={closeModalAdd}/>
<EditPost upadateSelectCategory={upadateSelectCategory} 
category={value.category} 
listCategories={value.listCategories} 
numberIdEdit={value.numberIdEdit}                                 
/>
</div>
);
};

Answer 1

您不会将listCategories传递给AddPost。

更新Post.js以包括以下内容：

<AddPost closeModalAdd={closeModalAdd} listCategories={value.listCategories}/>