从 api 渲染数据答案

【问题标题】：Rendering data from api从 api 渲染数据
【发布时间】：2020-08-04 14:54:29
【问题描述】：

  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);
  useEffect(() => {
    fetch("api-url")
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result.items);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      )
  }, [])
if (error) {
  return <div>Error: {error}</div>
} else if (!isLoaded) {
  return <div>Loading...</div>;
} else {
  return (
      <ul>
        {items.map(item => (
          console.log(item)
        ))}
      </ul>
    );
  }

如何在 typescript 中呈现对象数组中的数据？
我可以在调用 console.log(item) 时看到数据，控制台显示一个对象数组，其中包含所有数据

我试过了

 <ul>
     {items.map(item => (
       <li key={item.value}>
         {item.label}
       </li>
     ))}
 </ul>

数据库由对象数组组成 - {label: "string", value: "string", boolean: true}
当我尝试 item.label 或 item.value 时，我得到“在类型 'never' 上不存在属性 'label'。”

【问题讨论】：

Hi Tuan，你能把console.log(items)贴在这里吗？
[{..}{...} .... {...}] 0: {label: "some string", value: "some string", boolean: true} 。 . 9: {label: "some string", value: "some string", boolean: true}
我解决了，我只要加上useState([])

标签： reactjs typescript api

【解决方案1】：

尝试为您的“项目”指定“任何”类型，以防止 TS 将其视为“从不”。

 <ul>
     {items.map((item: Item) => (
       <li key={item.value}>
         {item.label}
       </li>
     ))}
 </ul>

编辑：添加了自定义接口的示例，而不是使用“any”。

interface Item {
  value: string;
  label: string;
  someBOolean: boolean;
}

【讨论】：

这样的解决方法意味着您只是在使用 Typescript，而不是按照预期的方式使用它。如果你知道item 应该有value 和label 属性，那么创建一个Item 类型，而不是使用any。
我添加了并且它有效。如何指定项目的类型？该对象具有标签、值和布尔类型。
谢谢@Oli，这是一个公平的观点。我已经更新了答案，为该项目提供了一个自定义界面。有关类型/接口及其区别的更多信息，请查看此处：medium.com/@martin_hotell/…

【解决方案2】：

您可以在useState 中定义期望值的类型，如下所示：

const [items, setItems] = useState<Object[]>([]);

Object 可能是您项目的实际界面。

【讨论】：