Javascript 为什么setItem（）不为项赋值&书信电报；h1>；{item.name}</h1>；没有得到展示

我无法显示项的名称，因为它似乎未定义。虽然我正在使用setItem（）将项分配给项状态属性，但如果我显示项，它仍然在控制台中，它是一个空对象

    function ItemDetail(props) {
  useEffect(() => {
    fetchItem();
  }, []);

  const [item, setItem] = useState({});

  const fetchItem = async () => {
    const fetchedItem = await fetch(
      `https://fortniteapi.io/v1/items/get?id=${props.match.params.id}&lang=en`,
      {
        headers: {
          Authorization: "79eab64a-7ec8a675-4d410f47-4a7304f4",
        },
      }
    );
    const itemn = await fetchedItem.json();
    setItem(itemn);
    console.log(item);
  };
  console.log(item.name);
  return (
    <div>
      <h1>{item.name}</h1>
    </div>
  );
}

功能项详细信息（道具）{
useffect（（）=>{
fetchItem（）；
}, []);
const[item，setItem]=useState（{}）；
const fetchItem=async（）=>{
const fetchedItem=等待获取(
`https://fortniteapi.io/v1/items/get?id=${props.match.params.id}&lang=en`，
{
标题：{
授权：“79eab64a-7ec8a675-4d410f47-4a7304f4”，
},
}
);
const itemn=await fetchedItem.json（）；
设置项（itemn）；
控制台日志（项目）；
};
console.log（item.name）；
返回(
{item.name}
);
}

我认为在

控制台.log

和返回调用发出之前，您的提取尚未完成，导致

项.name

未定义

您的

console.log

通常会在

setItem

完成状态设置之前触发，因为设置状态是一个异步操作。您的

console.log

显示一个空对象，因为您将状态初始化为空项。因此，您的控制台会记录一个空对象，因为在调用

console.log

之前状态尚未更改

另一件事是，这也发生在返回函数中。因为返回是在组件的第一次执行时计算的，所以您的项尚未提取。它正在尝试访问

项。名称

，但

项

是空对象，因此您得到了

未定义的

。如果

item.name！=未定义

，然后返回div。可以使用三元运算符执行此操作，如：

{item.name 
? <div>
  <h1>{item.name}</h1>
 </div>
: <div><h1>Item has not loaded yet!</h1></div>}

{item.name
? 
{item.name}
：项目尚未加载！}

它在返回div之前检查

item.name

。如果未定义item，则返回false，因为

或者，您可以通过console.logging

itemn

查看API实际给出的响应。例如，您可能必须将状态设置为

itemn.data

。但是如果没有看到

itemn

日志，很难说这一点。

---

当您在控制台上记录日志时会得到什么？我已经检查了API响应，没有问题。因此，在

fetch（）

完成之前，可能会执行

setItem（）

和

return

。如何解决此问题？如果在

setItem（itemn）

之前

console.log（itemn）

，

itemn

在控制台中显示API响应，但

setItem（itemn）

不工作。请发布console.log（fetchedItem）和console.log（itemn）输出的屏幕截图？我已经告诉过你如何用我发布的代码在获取之前解决返回执行问题，至于获取，我觉得很好。