выборка данных с помощью обработчика реакции возвращает неопределенное значение для вложенных свойств obj

Question

Я пытаюсь отобразить данные, которые были получены. но я не могу показать свойства вложенных объектов в реагировать. Есть идеи? если я записываю данные, я сначала получаю неопределенные данные, затем правильные данные. я предполагаю, что мне нужно дождаться загрузки данных, а затем отобразить их. но он работает для заголовка, который не находится во вложенном объекте.

function SingleBeneficiary({ match }) {

  const [data, setData] = useState({ data: []});
  const id = match.params.id

  useEffect(() => {
  async function fetchData() {
    const response = await fetch(`http://localhost:8081/v1/beneficiary/${id}`);
    const jsonData = await response.json()
    setData(jsonData)
    }
    fetchData();
  }, [])

  return (
 {data.title} // works
{data.address.careOf} // dont work

Данные

{ 
  "title":"myTitle",
  "address":{
    "careOf": "my adress"
  }

}

Answer 1

Вы должны проверить, имеет ли address свойство careOf, прежде чем использовать его, потому что первый раз data будет неопределенным, а во втором рендере будут данные после вызова API.

{data.address && data.address.careOf}

Answer 2

Ты можешь попробовать вот так? Я устанавливаю исходные данные на нуль, а взамен проверяю, не ноль ли. Если адрес может быть нулевым, требуется дополнительная проверка нуля.

function SingleBeneficiary({ match }) {

  const [data, setData] = useState(null);
  const id = match.params.id

  useEffect(() => {
  async function fetchData() {
    const response = await fetch(`http://localhost:8081/v1/beneficiary/${id}`);
    const jsonData = await response.json()
    setData(jsonData)
    }
    fetchData();
  }, [])

    return (
      <div>
        {data && (
          <div>
            <p>data.title</p>
            <p>data.address.careOf</p>
          </div>
        )}
      </div>
    );
}