调用react组件中的函数，不带事件处理程序或道具

Question

如果这个问题出现在其他地方，很抱歉，但在每个问题都涉及事件处理程序或子元素方法调用的情况下，找到答案会让人非常沮丧。

我需要在初始化组件时调用一个函数，基本上是在加载窗口时，或者立即调用。

在初始化时，我想调用getGameMeta((来更新游戏状态，如果我试图在jsx中调用它，我会进行循环，或者收到一个错误，说"函数作为React子级无效。如果你返回一个组件而不是从渲染……">

class Game extends React.Component{
constructor(props) {
super(props);
this.state = {name: undefined,};
this.getGameMeta = this.getGameMeta.bind(this);
}
getGameMeta(){
fetch(Url).then(data => {
console.log(data);
this.setState({
name: data[0].name
});
});
};
render(){
return (
<div>
{/* {this.getGameMeta()} */} causes loop
{/* {this.getGameMeta} */} causes error
<p>{this.state.name}</p>
</div>
);
};
};

Answer 1

在首次安装组件时，使用componentDidMount钩子是从远程端点加载数据的好方法。

示例

class Game extends React.Component {
constructor(props) {
super(props);
this.state = { name: undefined };
this.getGameMeta = this.getGameMeta.bind(this);
}
componentDidMount() {
this.getGameMeta();
}
getGameMeta() {
fetch(Url).then(data => {
console.log(data);
this.setState({
name: data[0].name
});
});
}
render() {
return (
<div>
<p>{this.state.name}</p>
</div>
);
}
}

Answer 2

您可以在componentDidMount中调用它。它保证在安装组件后立即调用它。React文档的更多内容：

如果您需要从远程端点加载数据，这是一个好地方以实例化网络请求。

getGameMeta(){
fetch(Url).then(data => {
console.log(data);
this.setState({
name: data[0].name
});
});
};
componentDidMount(){ this.getGameMeta() }

看来这就是你寻找的方式

Answer 3

如果您使用的是功能组件，则可以简单地使用useEffect。基本上，它在渲染UI之前加载数据。

import {useEffect} from "react";
const GameData=()=>{
const [fetchD,setFetchD]=useState("");
useEffect(()=>{
fetch(Url).then(data => {
console.log(data);
setFetchD(data[0].name);
});
});
})
}
export default GameData;

//您也可以在查看react文档https://reactjs.org/docs/hooks-effect.html