时间戳

首页 > 解决方案 > 为什么 setItem() 不给项目赋值？

javascript - 为什么 setItem() 不给项目赋值？

问题描述

我一直无法显示项目的名称，因为它似乎是未定义的。虽然我使用 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>
  );
}

标签： javascriptreactjsreact-hooks

解决方案

console.log我认为在调用和返回调用之前您的 fetch 尚未完成，item.name导致undefined.

你console.log通常会在你setItem完成状态设置之前触发，因为设置状态是一个异步操作。您console.log显示一个空对象，因为您将状态初始化为一个空项目。console.log因此，您的控制台会记录一个空对象，因为在调用之前状态尚未更改。

另一件事是，这也发生在您的返回函数中。因为返回是在组件的第一次执行时计算的，所以您的项目还没有被提取。它正在尝试访问item.name，但是item你得到的是一个空对象undefined。您应该先检查 ifitem.name != undefined然后返回 div。您可以使用三元运算符执行此操作，例如：

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

item.name在返回 div 之前进行检查。当 item 未定义时它给出 false，因为undefined 在 JavaScript 中被认为是错误的

或者，您可以通过 console.logging 查看 API 实际给出的响应itemn。例如，您可能必须设置状态itemn.data。itemn但是如果没有看到日志就很难说。

推荐阅读