Error: Cannot convert undefined or null to object

Question

我使用 fetch 向服务器发出请求并获得响应 - 类别列表。我在视图中显示此列表- table。在右侧的每个类别附近，我都有按钮 Delete。当我单击此按钮时，会出现带有两个按钮 Delete 和 Cancel 的模态 window。我使用 API 方法 DELETE 删除了一些类别。

当我在模式 window

中单击按钮 Delete

我的分类删除！不错！

但是在我的页面出现错误：

TypeError: 无法将 undefined 或 null 转换为对象

为什么会这样？以及如何修复它？

在我看来，这个错误可能是因为我错误地编写了方法 `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

问题出在您调用 useFormik 的方式上。您配置它的方式没有与之关联的输入字段。

这会导致当您单击删除按钮时执行提交并且 useFormik 尝试使用输入值构建对象以将其传递给 onSubmit prop。但是没有输入。

正在检查您的 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>
   );
};

Error: Cannot convert undefined or null to object

Error: Cannot convert undefined or null to object

javascript

reactjs

formik

我的分类删除！不错！

TypeError: 无法将 undefined 或 null 转换为对象

在我看来，这个错误可能是因为我错误地编写了方法 `deleteCategory`

Home.js:

DeleteCategory.js:

Table.js:

Error: Cannot convert undefined or null to object

Error: Cannot convert undefined or null to object

javascript

reactjs

formik

我的分类删除！不错！

TypeError: 无法将 undefined 或 null 转换为对象

在我看来，这个错误可能是因为我错误地编写了方法 deleteCategory

Home.js:

DeleteCategory.js:

Table.js:

在我看来，这个错误可能是因为我错误地编写了方法 `deleteCategory`