Javascript 如何修复React（TypeScrtipt）错误“；无效的钩子调用；？

我得到错误：“钩子调用无效。钩子只能在函数组件主体内部调用。”在react函数中：

interface Items {
  items: any[]
}

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

const ItemsList: React.FC<Items> = ({ items }) => {
  useEffect(() => {
    const response = Http.get<Items>(url).then(res => setItems(res)) || [] as Items[]
  }, []) //something wrong with this hook?

  return (
      <ul>
        {items.map((item) => {
          return (
            <ItemPreview key={item.id} item={item}/>
          );
        })}
      </ul>
  )
}

export default ItemsList

接口项{
项目：任何[]
}
const[items，setItems]=useState（）；
const ItemsList:React.FC=（{items}）=>{
useffect（（）=>{
const response=Http.get（url）.then（res=>setItems（res））| |[]作为项目[]
}，[]）//这个钩子有什么问题吗？
返回(

{items.map（（item）=>{
返回(
);
})}

)
}
导出默认项目列表

---

我不明白我做错了什么？有人能告诉我错误在哪里吗？

您需要从组件中调用React钩子，如下所示：

接口项{
项目：任何[]
}
const ItemsList:React.FC=（{items}）=>{
const[items，setItems]=useState（）；
useffect（（）=>{
const response=Http.get（url）.then（res=>setItems（res））| |[]作为项目[]
}, []);
返回(

{items.map（（item）=>{
返回(
);
})}

)
}
export default ItemsList

与错误消息中的内容非常接近：在声明函数组件之前，您正在调用

useState

钩子。Move

const[items，setItems]=useState（）右上方
useffect（（）=>{
和下方
ItemsList:React.FC
。谢谢。我修复了@Sam R.said这样的错误，在您回答之前（您还需要删除
{items}
），现在我有另一个错误：）“对象可能是“未定义的”。在”items.map“中“行。这是正确的。这篇关于在useEffect钩子中进行api调用时避免竞争条件的博文可能也值得您阅读。@eu97不确定它是否对您有用，但我使用
边界。