Question

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

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

在初始化时，我想调用getGameMeta（）来更新游戏状态，如果我试图在jsx中调用它，那么我会循环执行或收到一条错误消息：“函数作为React子代无效。这可能如果您返回一个Component而不是从render ....，则会发生这种情况。“

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 Docs的更多内容：

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

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

componentDidMount(){ this.getGameMeta() }

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

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

2 个答案: