错误:无法将未定义或空值转换为对象

问题描述：

我使用fetch向服务器发出请求，并获得响应-类别列表.我在视图表中显示此列表.在右侧的每个类别附近，我都有 Delete (删除)按钮.当我单击此按钮时，将出现模态窗口，其中包含两个按钮Delete和Cancel.我使用API方法DELETE删除了某些类别.

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.

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

When I click button Delete in modal window

但是在我的页面中出现错误:

But in my page appears error:

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

Why is this happening? And how to fix it?

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

答

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

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

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

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.

检查您的DeleteCategory组件代码，不需要使用useFormik.毕竟，您仅显示确认模式.相反，您可以执行以下操作:

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

错误:无法将未定义或空值转换为对象

DeleteCategory.js:

Table.js:

相关推荐