Блог

я выбираю пользователей из dummyapi. Я хочу перечислить каждого пользователя в компоненте до этого , с которым я пытаюсь связаться с console.log каждым пользователем forEach , но он выдает ошибку: «Ошибка типа: Не удается прочитать свойство ‘forEach’ null». Я установил для пользователей значение null в начале. После того, как я получил данные, я изменил значение пользователей. Когда я console.log это делаю, пользователи сначала обнуляются, а затем отображаются данные. Я предполагаю, что сначала он переходит в цикл foreach, когда пользователи равны нулю, поэтому он выдает ошибку. Я попробовал это сделать, но ничего не вышло.

 { users !== null amp;amp; users.forEach(user => {
  console.log(user);
})}
 

Это мой код:

 import { useEffect, useState } from "react";
import "../styles/App.css";
import Header from "../components/Header";
import User from "./User";
import axios from "axios";

function App() {
  const BASE_URL = "https://dummyapi.io/data/api";

  const [users, setUsers] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get(`${BASE_URL}/user?limit=15`, {
          headers: { "app-id": APP_ID },
        });
        setUsers(response.data);
      } catch (error) {
        console.log(error);
      }
    }
    fetchData();
  }, []);

  users.forEach((user) => {
    console.log(user);
  });

  return (
    <>
      <Header />
      <div className="filter">
        <h3 className="filter__title">USER LIST</h3>
        <div>
          <input type="text" placeholder="Search by name" />
        </div>
      </div>
    </>
  );
}

export default App;
 

вы можете поставить знак вопроса после такого пользовательского объекта, поэтому проверьте, существует ли пользователь

 users?.forEach((user) => {
console.log(user);
 

});

Запустите свою forEach петлю внутри useEffect крючка:

 useEffect(() => {
  users amp;amp; users.length amp;amp; users.forEach((user) => {
    console.log(user);
  });
}, [users]);
 

Этот useEffect крючок будет выполняться только при изменении значения users .

Вы можете сначала добавить проверку, когда вы сопоставляете пользователей, как:

 users amp;amp; users.forEach((user) => {
    console.log(user);
  });
 

Немного более чистый и более проверяемый случай:

Примечание: Вы также можете обернуть функцию в useCallback функцию, чтобы избежать ее вызова, когда URL она не меняется.

1. Вам нужно инициализировать свое пользовательское состояние следующим образом:
   const [users, setUsers] = useState([]);
2. При проверке пользователей вам необходимо проверить, соответствует ли длина вашего пользовательского массива users.length > 0 amp;amp; users.forEach(пользователь =>> { >>
   // Ваша логика
   }) или используйте isEmpty() из библиотеки, например lodash или ramda

 const fetchData = async (url) => {
    const response = await axios.get(`${url}/user?limit=15`, {
      headers: { "app-id": APP_ID }
    });

    const responseData = await response?.data?.data;

    if (responseData) {
      setUsers(responseData);
    }
  };

  useEffect(() => {
    fetchData(BASE_URL);
  }, []);
 

Другой подход, который вы можете использовать, — это установить начальное значение в виде пустого массива [] вместо нуля.

   const [users, setUsers] = useState([]);
 

таким образом, вам не нужно проверять значение null, даже если вы вызываете для него функции массива.