Reactjs 在我的案例中，如何重新制作componentDidMount以使用Effect？

我有这个类组件：

class App extends React.Component {

       state = {data: []};

    async componentDidMount() {
         try {
            const res = await apiHelpFunction('/...', {
              method:'GET'
            });
             this.setState({data:res.data});
            } catch(e) { 
                console.error(e);
            } 
    };

    render(){
      return (
        <div>
           <Table dataAttribute = {this.state.data}/>
        </div>
    )}}

类应用程序扩展了React.Component{
状态={data:[]}；
异步组件didmount（）{
试一试{
const res=wait apiHelpFunction（'/…'{
方法：'GET'
});
this.setState（{data:res.data}）；
}第（e）款{
控制台错误（e）；
} 
};
render（）{
返回(
)}}

但我需要功能组件。我尝试将此组件重新制作为功能：

const App = () => {

      const [data, setData] = useState([]);


    //.... here should be useEffect with a request to the server


    render(){
      return (
        <div>
           <Table dataAttribute = {data} />
        </div>
    )}}

const-App=（）=>{
const[data，setData]=useState（[]）；
//..这里应该是对服务器的请求的useffect
render（）{
返回(
)}}

---

但我不理解useEffect以及如何将

componentDidMount

重新制作成

useEffect

。请帮助我。

您可以使用useEffect作为组件安装，方法是提供函数作为参数作为第一个参数，在第二个参数中提供空数组（[]）

简单地说，如果您在useffect中没有给出第二个参数，那么它将在每次更新或装载组件时执行。但是，如果在useffect中提供空数组作为第二个参数，那么它将仅在组件装载时执行

它们是更多的useEffect用例，以便更好地理解

参考下面的代码

const App = () => {

      const [data, setData] = useState([]);


    useEffect(()=>{
      apiHelpFunction('/...', {
              method:'GET'
            }).then(res=>setData(res.data)).catch(e=>console.error(e));
  },[]);



      return (
        <div>
           <Table dataAttribute = {data} />
        </div>
    )}

const-App=（）=>{
const[data，setData]=useState（[]）；
useffect（（）=>{
apiHelpFunction（“/…”{
方法：'GET'
}).then（res=>setData（res.data））.catch（e=>console.error（e））；
},[]);
返回(
)}

使用异步等待：

const App = () => {

      const [data, setData] = useState([]);
      async function handleDataUpdate() {
         try {
            const res = await apiHelpFunction('/...', {
              method:'GET'
            });
             setData(res.data);
            } catch(e) { 
                console.error(e);
            } 
    };

    useEffect(()=>{
      handleDataUpdate();
  },[]);



      return (
        <div>
           <Table dataAttribute = {data} />
        </div>
    )}

const-App=（）=>{
const[data，setData]=useState（[]）；
异步函数handleDataUpdate（）{
试一试{
const res=wait apiHelpFunction（'/…'{
方法：'GET'
});
setData（res.data）；
}第（e）款{
控制台错误（e）；
} 
};
useffect（（）=>{
handleDataUpdate（）；
},[]);
返回(
)}

const-App=（）=>{
const[data，setData]=useState（[]）；
useffect（（）=>{
apiHelpFunction（“/…”{
方法：'GET'
}).then（res=>setData（res.data））.catch（console.error）；
},[])
render（）{
返回(
)}}

Error:``第17:25行：分析错误：无法在异步函数``外部使用关键字'await'``第：`code>const res=await apiHelpFunction（'/…'），{My bad，您不能将useEffect first参数用作异步。我已更改了代码并使用了它。如果您仍要使用Wait，则可以将API代码包装到另一个异步函数中，然后调用useEffect。现在错误：@bytor，将async handleDataUpdate（）更改为async function handleDataUpdate（）在函数定义中。我再次更新了代码。