Синтаксис JavaScript для React - необязательные цепочки

Общий синтаксис JavaScript для React - необязательные цепочки

Видео введение

Версия персонального сайта

JavaScript

Если мы не знаем, являются ли данные, которые мы получаем, объектом, и вызываем его со значением объекта, и не делаем никаких выводов, программа сообщит об ошибке.

let food = null;

console.info(food.name); // error : Cannot read properties of null (reading 'name')

Поэтому, чтобы определить, имеет ли объект нужный нам ключ, можно использовать следующие методы.

let food = { name: "apple" };

if (food != null) {
  console.info(food.name); // output : apple
}

// or

if (food) {
  console.info(food.name); // output : apple
}

Или использовать опциональную цепочку, чтобы проверить, есть ли у объекта ключ, который мы хотим получить.

let food = { name: "apple" };

if (food?.name) {
  console.info(food.name); // output : apple
}

//不會進到這個if 因為food物件內並沒有名為color的key
if (food?.color) {
  console.info(food.color);
}

Необязательная цепочка выполняется путем добавления к имени объекта символа ? name используется для проверки, есть ли у объекта food ключ с таким именем.

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

let food = {
  name: "apple",
  color: "red",
  getFoodData: () => {
    console.info("getFoodData..."); // output : getFoodData...
  },
};

food?.getFoodData?.();

React

Теперь используйте API fetch для выборки постов, предоставленных jsonplaceholder, и установите ограничение на 5, чтобы за одну выборку мы получали только 5 постов.

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

  useEffect(() => {
    const getPostData = async () => {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts?_limit=5"
      );
      const data = await response.json();
      setPosts(data);
    };

    getPostData();
  }, []);

  console.info(posts); // output : (5) [{…}, {…}, {…}, {…}, {…}]

  return (
    <div className="App">
      {posts.map((post) => (
        <p>{post.title}</p>
      ))}
    </div>
  );
}

Это происходит потому, что состояние posts инициализируется в null, а состояние null не поддерживает функцию map, отсюда и сообщение об ошибке.

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

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

  useEffect(() => {
    const getPostData = async () => {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts?_limit=5"
      );
      const data = await response.json();
      setPosts(data);
    };

    getPostData();
  }, []);

  console.info(posts);

  if (posts == null) {
    return <h1>Loading...</h1>;
  }

  return (
    <div className="App">
      {posts.map((post) => (
        <p>{post.title}</p>
      ))}
    </div>
  );
}

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

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

  useEffect(() => {
    const getPostData = async () => {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts?_limit=5"
      );
      const data = await response.json();
      setPosts(data);
    };

    getPostData();
  }, []);

  console.info(posts); // output : (5) [{…}, {…}, {…}, {…}, {…}]

  return (
    <div className="App">
      {posts?.map((post) => (
        <p>{post.title}</p>
      ))}
    </div>
  );
}