我从服务器获取类别列表。而且我在每个类别附近都有按钮Edit
。此打开模式带有输入
和提交按钮
。当我单击按钮时,我的类别编辑和我的列表必须更新。
但是更新
列表我在Table.js中出现错误:
无法读取未定义的属性“map”
发生这种情况是因为:
在 ChangeCategory.js 中此行之后的 data.data
未定义:
const data =等待response.json();
但是如何修复它?
在组件主页中,我的数据正常。
可能与ChangeCategory.js
中的PUT
方法有关?
/.....
- 我删除有问题的代码只是为了减少问题中的代码。
我还评论了执行更新列表的行
Home.js:
const Home = () => {
const [value, setValue] = useState({
listCategory: [],
numberId: "",
isOpened: false
});
useEffect(() => {
async function fetchData(/......) {
const response = await fetch(`/.....`, {/.......});
const data = await response.json();
setValue(prev => ({ ...prev, listCategory: data.data, /...... }));
} fetchData( /..... );
}, [ /..... ]);
const changeId = (argNumberId) => {
setValue({
...value,
numberId: argNumberId,
isOpened: true
});};
const updateList = data => { // METHOD WHICH UPDATE LIST
setValue({
...value,
listCategory: data
})
}
return (
<div>
<Table dataAttribute={value.listCategory} changeId={changeId} valueId={value.numberId} />
{value.isOpened && <ChangeCategory value={value.numberId} updateList={updateList}/>}
</div>);};
ChangeCategory.js:
const ChangeCategory = (props) => {
const { /....... } = useFormik({
initialValues: {
title: '',
},
onSubmit: async (formValues) => {
const response = await fetch(`${apiUrl}/${props.value}`, {
method: PUT, /.......} )
const data = await response.json();
props.updateList(data.data); // CALL FUNCTION updateList
}});
return (
<div>
<form onSubmit={handleSubmit}>
<InputCategory
/........
}}/>
<button type="submit">Edit</button>
</form>
</div>);};
表.js:
export default (props) => (
<table>
<thead>
<tr>
<th>ID</th>
<th>TITLE</th>
</tr>
</thead>
<tbody>
{props.dataAttribute.map(item => (
<tr key={item.id}>
<td>{item.id} </td>
<td>{item.title} </td>
<td><button onClick={() => props.changeId(item.id)}>Edit</button></td>
</tr>
))}
</tbody>
</table>
);
服务器响应:
{"data":[{"id":1,"title":"animals"}, {"id":2,"title":"space"}, {"id":3,"title":"sport"}]}
最佳答案
您的.map
函数甚至在您收到数据之前就运行,它不能对未定义
或null
对象执行此操作。
您可以:
- 有一个默认的 prop 值,您的
.map
函数将在某个默认对象上运行。 - 有条件地检查所述 prop 对象值。
{props.dataAttribute ? props.dataAttribute.map(...) : null}
我建议两者都做。
关于javascript - 更新列表时无法读取未定义的属性 'map',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61546648/