錯誤：無法將未定義或 null 轉換為 object

Question

我使用fetch向服務器發出請求並獲取響應 - 類別列表。 這個列表我顯示在視圖表中。 在右側的每個類別附近，我都有按鈕Delete 。 當我單擊此按鈕時，出現模態 window ，帶有兩個按鈕Delete和Cancel 。 我使用 API 方法DELETE刪除某些類別。

當我單擊模態 window 中的按鈕Delete時

我的分類刪除！ 很好！

但是在我的頁面中出現錯誤：

類型錯誤：無法將未定義或 null 轉換為 object

為什么會這樣？ 以及如何解決？

在我看來，這個錯誤可能是因為我錯誤地編寫了方法deleteCategory

主頁.js：

const Home = () => {
    
  const [value, setValue] = useState({
     /.....
    listCategory: [],
    numberIdDelete: "",
    isOpenedDelete: false
  });
    
const deleteCategory = (argDeleteCategory) => {    //  in this method id some category set as value in field - numberIdDelete                                   
    setValue({                                     //  that is, I'll know on which category the user has clicked delete button
        ...value,
        numberIdDelete: argDeleteCategory,     //  this id I put in path in component DeleteCategory
        isOpenedDelete: true
    });
};
    
const cancel = () => {                   // close modal window
    setValue({
        ...value,
        isOpenedDelete: false
    });
};
    
  return (
    <div> 
      <Table dataAttribute={value.listCategory} 
             deleteCategory={deleteCategory}/>    // in component Table located button Delete
                 
         {value.isOpenedDelete && <DeleteCategory value={value.numberIdDelete} cancel={cancel} />} 
   </div>
  );
};

刪除類別.js：

const DeleteCategory = (props) => {
    
    const {handleSubmit} = useFormik({  
        onSubmit: async () => {
              const response = await fetch(`pathToServer/${props.value}`, { // put value from state (id some category)
                  method:'DELETE',
                  headers: {/.....}
              });
              const data = await response.json();   
      }});

   return ( 
     <div >
      <form onSubmit={handleSubmit}> 
          <button type="submit" onClick={() => props.delCategory}>Delete</button>
          <button type="submit" onClick={() => props.cancel}>Cancel</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.deleteCategory(item.id)}>Delete</button></td>    // Button Delete
        </tr>
      ))}
    </tbody>
  </table>
);

Answer 1

問題在於您調用useFormik的方式。 您配置它的方式，沒有與之關聯的輸入字段。

這導致當您單擊刪除按鈕時執行提交，並且useFormik嘗試使用輸入值構建一個 object 以將其傳遞給onSubmit屬性。 但是沒有輸入。

檢查您的DeleteCategory組件代碼，您不需要使用useFormik 。 畢竟，您只是顯示確認模式。 相反，您可以執行以下操作：

const DeleteCategory = (props) => {
    const delCategory = async () => {
        const response = await fetch(`pathToServer/${props.value}`, { // put value from state (id some category)
            method:'DELETE',
            headers: {/.....}
        });
        const data = await response.json();

        // Do whatever when your request has been performed.
    };

   return ( 
       <div >
          <button type="button" onClick={() => delCategory()}>Delete</button>
          <button type="button" onClick={props.cancel}>Cancel</button>
       </div>
   );
};