Блог

Я столкнулся с проблемой при попытке найти объект в массиве объектов (который также является состоянием) с помощью метода find(). Интересно, что при использовании того же кода, за исключением случаев, когда массив объектов присваивается постоянной переменной (что означает, что это не состояние), все работает нормально. Я работал над состоянием, каким оно было, затем я работал над копией состояния, но безрезультатно. Здесь я пересылаю весь компонент React, несколько упрощенный для целей этого запроса (первоначально я извлекаю этот массив с сервера и, используя один идентификатор, хочу распечатать другие свойства данного объекта):

 import React, { useState } from "react";
import "./App.css";

function About() {
  const [posts, setPosts] = useState([]);

  const post = [
    { userId: 1, id: 1, title: "sunt", author: "Tom" },
    { userId: 1, id: 2, title: "qui est esse", author: "Tom" },
    { userId: 1, id: 3, title: "ea molestias", author: "Tom" },
    { userId: 1, id: 4, title: "eum et est occaecati", author: "Tom" },
  ];

  const button = <button onClick={() => setPosts(post)}>Click me</button>;
  //id of one of the object
  const ItemId = 2;
  console.log(posts);
  //trying to find the object that has id: 2 an then print other
  //  key -values pairs from that prticular object
  let copyState = [...posts];
  console.log(["state copied"], copyState);
  let bla = copyState.find((item) => item.id === ItemId);
  console.log(bla);
  // pritns: {userId: 1, id: 2, title: "qui est esse",author: "Tom"}

  // console.log(bla.title)
  //prints : undefined

  // console.log(bla.author)
  //prints: undefined
  //console.log(typeof 'bla')
  // prints: string

  return (
    <div>
      <h1>About Page</h1>
      {button}
    </div>
  );
}

export default About;

 

Нажатие на кнопку загружает состояние, а затем путем раскомментирования консоли.начнут появляться ошибки журнала. Первый console .log (bla) печатает правильный объект с идентификатором has ana: 3. Но затем следующая консоль.журналы пытаются распечатать другие свойства из этого объекта, и это вызывает ошибки. Как я упоминал ранее, когда я делал то же самое, но не в состоянии, я смог получить доступ к этим другим свойствам, используя точечную нотацию, например, bla . автор и имя «Том» были напечатаны на консоли. Ценю любую помощь здесь, большое спасибо

Я попытался запустить ваш код и работает, как ожидалось. Давайте проверим код:

Когда компонент отображается в первый раз, posts устанавливается как пустой массив.

Затем вы пытаетесь получить find элемент из posts with id 2 и сохранить его как bla переменную.

Поскольку posts пусто, bla является undefined . Затем вы пытаетесь прочитать title и author свойство bla , но поскольку bla оно не определено, у вас возникает ошибка : TypeError: Cannot read property 'title' of undefined .

Если вы условно регистрируете свойства (пример использования необязательной цепочки), код будет работать, и компонент будет отображаться правильно. Затем, после нажатия кнопки, posts состояние устанавливается в массив объектов, find функция вернет объект, и в ваших журналах будут показаны правильные данные.

Просто еще один совет: последний console.log: typeof 'bla' , должен быть typeof bla без '

Я нашел основную причину ошибки. При рендеринге компонента posts отображается пустой массив и console.log(bla.title) попробуйте получить доступ к заголовку из объекта bla. Так что либо вам нужно скопировать начало после щелчка, либо попытаться использовать optional chaining operator заголовок для доступа, например console.log(bla?.title)

При первоначальном отображении значение bla равно null, поскольку массив posts is empty [] . Обработайте случай, когда find нет результата, проверив значение null. Попробуйте фрагмент.

 function About() {
  const [posts, setPosts] = React.useState([]);

  const post = [
    { userId: 1, id: 1, title: "sunt", author: "Tom" },
    { userId: 1, id: 2, title: "qui est esse", author: "Tom" },
    { userId: 1, id: 3, title: "ea molestias", author: "Tom" },
    { userId: 1, id: 4, title: "eum et est occaecati", author: "Tom" },
  ];

  const button = <button onClick={() => setPosts(post)}>Click me</button>;

  
  const ItemId = 2;
  console.log(posts);

  let copyState = [...posts];
  console.log(["state copied"], copyState);

  let bla = copyState.find((item) => item.id === ItemId);
  console.log(bla);

  if (bla) {
    console.log(bla.title)
    console.log(bla.author)
  } else {
    console.log('bla is null/undefined');
  }

  return (
    <div>
      <h1>About Page</h1>
      {button}
    </div>
  );
}


ReactDOM.render(<About />, document.getElementById('app')); 

 <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id="app"></div>