如何使用 useEffect 更好地设置 fetch？

Question

我正在学习 JS 和 React，我来到下面的代码示例和一些我不理解的部分。 second.then 在 useUffect 里面这样可以吗，还是在 getData func 里面更好？ 渲染中还有数据**？**.map，我不明白我们为什么需要？，这是三元运算符吗？ 所以我认为三元运算符需要：作为第二个参数。 提前致谢！

import React, { useState, useEffect } from "react";

const FetchData = () => {
  const [data, setData] = useState(null);
  const fetchURL = "https://jsonplaceholder.typicode.com";
    
    const getData = () => fetch(`${fetchURL}/posts`)
        .then((res) => res.json());

    useEffect(() => {
        getData().then((data) => setData(data));
    }, []);

    return (<div>
        {data?.map(item => (
            <ul>
                <li>{item.title}</li>
          </ul>
      ))}
  </div>);
};

export default FetchData;

Answer 1

我认为，您的代码很好，如果有任何错误，请将getData and fetchURL移动到useEffect中。

此外，您可以简单地使用async/await方法。

import React, { useState, useEffect } from "react";

const FetchData = () => {
  const [data, setData] = useState(null) // here you can define `[]` if you don't want to check `?`
  useEffect(() => {
    const fetchURL = "https://jsonplaceholder.typicode.com";
    const getData = async () => {
      const res = await fetch(`${fetchURL}/posts`)
      const result = await res.json();
      setData(result);
    }
    getData()

  }, []);

    return (<div>
        {data?.map(item => (
            <ul>
                <li>{item.title}</li>
          </ul>
      ))}
  </div>);
};

export default FetchData;

? 称为可选链运算符，它将帮助您检查值是否为空值(null or undefined) 。

基本上，它只是在做if (data) { data.map...}