错误：无法将未定义或 null 转换为 object

Question

I make request to the server using fetch and get response - category list. This list I display in view- table. Near each category on the right I have button Delete . When I click this button appears modal window with two buttons Delete and Cancel . I used API method DELETE that delete some category.

When I click button Delete in modal window

My category delete! It's good!

But in my page appears error:

TypeError: Cannot convert undefined or null to object

Why is this happening? And how to fix it?

In my opinion, that this error is maybe occurring because I incorrectly write method deleteCategory

Home.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>
  );
};

DeleteCategory.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>
   );
};

Table.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

The problem is in the way you are calling useFormik . The way you are configuring it, there are no input fields associated with it.

This causes that when you click the delete button a submit is performed and useFormik tries to build an object with the input values to pass it to onSubmit prop. But there are no inputs.

Examining your DeleteCategory component code, you don't need to use useFormik . You are only showing a confirmation modal after all. Instead, you could do something like:

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>
   );
};