时间戳

首页 > 解决方案 > 错误：无法将 undefined 或 null 转换为对象

javascript - 错误：无法将 undefined 或 null 转换为对象

问题描述

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

当我单击Delete模式窗口中的按钮时

我的分类删除！很好！

但在我的页面出现错误：

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

为什么会这样？以及如何解决？

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

标签： javascriptreactjsformik

解决方案

问题在于你打电话的方式useFormik。您配置它的方式，没有与之关联的输入字段。

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

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

推荐阅读