Блог

Используется для создания телефонной книги CRUD. Использование JSON-сервера в качестве моей притворной базы данных.

Когда я создаю новые данные, они успешно добавляются в мою базу данных. Однако в этот момент я получаю сообщение об ошибке состояния не определено. Когда я обновляю DOM, он отображается нормально.

Моя функциональность создания выглядит следующим образом.

   const createContact = async contactObject => {
    await fetch('http://localhost:3001/phonebook', {
      method: 'POST',
      body: JSON.stringify(contactObject),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
  };

  const contactObject = {
    name: newName,
    number: newNumber,
    date: new Date().toISOString(),
  };

  createContact(contactObject).then(res => setPersons(persons.concat(res)));
  

Начальное состояние

   const [persons, setPersons] = useState([])

  const getAllContacts = async () => {
    const res = await fetch('http://localhost:3001/phonebook')
    const data = await res.json()
    return data
  }

  useEffect(() => {
    getAllContacts().then(response => setPersons(response))
  }, [])
  

Новые данные добавляются в мою базу данных правильно onSubmit

 {
  "phonebook": [
    {
      "name": "hello",
      "number": "111",
      "date": "2020-10-29T03:02:44.604Z",
      "id": 1
    },
    {
      "name": "world",
      "number": "222",
      "date": "2020-10-29T03:16:00.725Z",
      "id": 2
    }
  ]
}
  

Я попытался сделать так, чтобы React не отображал состояние, если оно не доступно. В моем компоненте рендеринга

 export const ContactList = ({ persons }) => {
  return persons.length ? (
    <ul>
      {persons.map(person => (
        <Contact key={person.id} person={person} />
      ))}
    </ul>
  ) : (
    <h1>Loading contacts</h1>
  );
};
  

Я думал, что это не будет пытаться перечислять людей, пока они не будут доступны, однако это все еще дает мне persons.id неопределенную ошибку.

Первый раз делаю CRUD, поэтому я не знаком с тем, как реагирует на это.

Нужно вернуть что-то из функции

  const createContact = async (contactObject) => {
    const res = await fetch('http://localhost:3001/phonebook', {
        method: 'POST',
        body: JSON.stringify(contactObject),
        headers: {
            "Content-type": "application/json; charset=UTF-8"
        }
    })
    const data = await res.json()
    return data
  

Также при обновлении состояния требуются функциональные обновления

 .then(data => setPersons(persons => persons.concat(data)))