SetState体外reactjs

Question

我尝试设置state，但得到错误“钩子只能在函数组件的主体内调用”。

这是代码导入React，{ useState }从"react"；

import AuthService from "../Services/AuthService";

const [Searchfile, setSearchfile] = useState([]);

AuthService.getalldata().then((res) => {
  setSearchfile(res.data);
});

// const Searchfile = [
//   { title: "ayam", singer: "gigi" },
//   { title: "ucuk", singer: "asd" },
// ];

export default Searchfile;

谁能给我解释一下为什么这是错误，以及如何修复它？:D

Answer 1

尝试添加一个功能组件，并将代码粘贴到那里。

​

import React, { useState } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p> {count}</p>
      <button onClick={() => setCount(count + 1)}>
        click here
      </button>
    </div>
  );
}

​

Answer 2

您试图在功能组件外部调用useState钩子，这违反了钩子的规则。看过你的代码后，你似乎想要创建一个定制的钩子，所以我的建议是这样做：

import { useState } from 'react'
import AuthService from "../Services/AuthService";

const UseSearchFile = () => {
const [Searchfile, setSearchfile] = useState([]);

  AuthService.getalldata().then((res) => {
  setSearchfile(res.data);
});
  
  return {Searchfile}
}

export default UseSearchFile 

然后在需要的地方导入它，如下所示：

import UseSearchFile from ...correct path

并这样称呼它：

const { Searchfile } = UseSearchFile()