Ошибка: невозможно преобразовать неопределенный или нулевой объект - PullRequest
Новая
       31

Ошибка: невозможно преобразовать неопределенный или нулевой объект

0 голосов
/ 30 апреля 2020

Я делаю запрос к серверу, используя fetch и получаю ответ - список категорий. Этот список я отображаю в view-таблице. Рядом с каждой категорией справа у меня есть кнопка Удалить . При нажатии на эту кнопку появляется модальное окно с двумя кнопками Delete и Cancel. Я использовал метод API DELETE, который удаляет некоторую категорию.

Когда я нажимаю кнопку Delete в модальном окне

Моя категория удаляется! Это хорошо!

Но на моей странице появляется ошибка:

TypeError: Невозможно преобразовать неопределенное или нулевое значение в объект

Почему это происходит? И как это исправить?

На мой взгляд, эта ошибка может происходить из-за того, что я неправильно пишу метод 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>
   );
};

Таблица. 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>
);

1 Ответ

0 голосов
/ 30 апреля 2020

Проблема в том, как вы звоните 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>
   );
};
...