Question

我有以下代码：

getModal = e => {
  this.setState(
    {
      name: e.name,
      game: e.packers
    },
    () => {
      return (<Modal name={this.state.name} game={this.state.game} />);
    }
  );
};
data = {
  name: "jack sparrow",
  game: "packer wins"
};

setModal = () => {
  var a = popModal.show(this.getModal(data));
};

我无法返回Modal组件。我不知道它的语法是否正确。当我单击一个按钮时，setModal被激活。我能够获得控制台结果但是无法返回组件。我在这做错了什么？

Answer 1

由于多种原因，您无法从setState返回组件，最大的原因是异步功能，并且运行setState不会立即更改状态的内容。用那个陈述

让我们看看下面的代码

this.setState(
    {
      name: e.name,
      game: e.packers
    },
    () => {
      return (<Modal name={this.state.name} game={this.state.game} />);
    }
  )

提供给setState的函数只是一个回调方法。基本上它是一个函数，setState在成功更新状态后运行。

如果你只是想恢复模态，我建议像这样构造它

getModal = e => {
  this.setState(
    {
      name: e.name,
      game: e.packers
    });
  return (<Modal name={e.name} game={e.packers} />);
}

这样做会确保getModal确实返回你的模态组件。但是，如果你希望模态的名称和游戏道具随着这个组件的状态而改变，那么我建议把它移到渲染方法中。

在setState之后返回组件

1 个答案: