javascript - 更新列表时无法读取未定义的属性 'map'

Question

我从服务器获取类别列表。而且我在每个类别附近都有按钮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"}]}

Answer 1

您的.map函数甚至在您收到数据之前就运行，它不能对未定义或null对象执行此操作。

您可以:

• 有一个默认的 prop 值，您的 .map 函数将在某个默认对象上运行。
• 有条件地检查所述 prop 对象值。 {props.dataAttribute ? props.dataAttribute.map(...) : null}

我建议两者都做。