Javascript 在react组件中调用函数，而不使用事件处理程序或道具

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

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

在初始化时，我想调用一个getGameMeta来更新游戏状态，如果我试图在jsx中调用它，我会生成一个循环，或者得到一个错误，说函数作为子函数无效。如果返回的是组件而不是从渲染…返回，则可能会发生这种情况

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>
    );
  };
};

当组件第一次安装时，使用钩子是从远程端点加载数据的好方法

范例

当组件第一次安装时，使用钩子是从远程端点加载数据的好方法

范例

您可以在componentDidMount中调用它。它保证在安装组件后立即调用它一次。更多信息来自：

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

看起来这就是您要寻找的方法，您可以在componentDidMount中调用它。它保证在安装组件后立即调用它一次。更多信息来自：

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

---

看来这就是您要寻找的方式

那么componentDidMount呢？使用lifecycle钩子，否则对组件的任何更新都会通过调用getGameMeta一次又一次地呈现它。使用lifecycle方法@TheReasonWhat about component didmount？使用lifecycle钩子，否则对组件的任何更新都会一次又一次地调用getGameMeta呈现它。通过@TheReason使用生命周期方法

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>
    );
  }
}

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

componentDidMount(){ this.getGameMeta() }