Javascript 如何使用useEffect更好地设置抓取？

我正在学习JS和React，下面的代码示例和一些我不太理解的部分。第二个。然后是内部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;

import React，{useState，useffect}来自“React”；
常量FetchData=（）=>{
const[data，setData]=useState（null）；
常量fetchURL=”https://jsonplaceholder.typicode.com";
const getData=（）=>fetch（`${fetchURL}/posts`）
。然后（（res）=>res.json（））；
useffect（（）=>{
getData（）。然后（（数据）=>setData（数据））；
}, []);
返回(
{data？.map（项=>(

{item.title}

))}
);
};
导出默认数据；

我认为，您的代码很好，如果有任何错误，请将

getData和fetchURL

移动到

useffect

中

同样，您也可以简单地使用

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;

从“React”导入React，{useState，useffect}；
常量FetchData=（）=>{
const[data，setData]=useState（null）//如果不想检查，可以在这里定义“[]”`
useffect（（）=>{
常量fetchURL=”https://jsonplaceholder.typicode.com";
const getData=async（）=>{
const res=wait fetch（`${fetchURL}/posts`）
const result=await res.json（）；
设置数据（结果）；
}
getData（）
}, []);
返回(
{data？.map（项=>(

{item.title}

))}
);
};
导出默认数据；

调用

？

，这将帮助您检查值是否为null

（null或未定义）

---

基本上，它只是在做

if（data）{data.map…}

谢谢，现在我明白了？。所以在获取数据时使用async/Wait总是更好的方法？不是这样的，我只是另一种方法，看起来可读性更好