Question

我有一个依赖一些AJAX调用来完成渲染的组件。 AJAX调用每次都返回不同的东西。我想要一个按钮，每次都会重新渲染随机组件。现在，我有两个组件Random和Next。

Next目前呈现如下：

render() {
  return (
    <div>
      <Random variable={this.getVariable()}></Random>
      <button>Next</button>
    </div>
  );
}

和Random呈现如下：

render() {
  return (
    <div className="clue-module col-md-4">
      <div>{this.props.variable}</div>
      {this.renderTags()}
    </div>
  );
}

所以我现在的方式就是在Next中，我进行一次AJAX调用，得到this.getVariable()返回的响应。然后它被传递到Random。 Random进行AJAX调用，使用this.props.variable的值作为请求参数。在render中，它显示this.props.variable以及this.renderTags()的值，这是第二次AJAX调用的结果。

现在这不能正常工作。 AJAX调用是成功的，但不是在一起。我认为这是因为Next在请求完成之前呈现，然后Random没有正确呈现，因为它没有得到{{1的结果AJAX及时调用。

我应该如何构建这个？是否所有请求都在Next？然后，我如何设置Random，以便每次按下按钮时都会呈现新的Next？

Answer 1

您应该尝试在父级中使用状态变量并将ajax传递给它。通常在componentDidMount（）。

中

componentDidMount() { this.setState({variable: this.getVariable}); }
render() {
  return (
    <div>
      <Random variable={this.state.variable}></Random>
      <button>Next</button>
    </div>
  );
}

Answer 2

我建议在代码成为意大利面之前使用类似Flux的架构，但基本上你希望每次获得新值时，Next的状态都会改变。

因此，在回调Ajax调用时，请执行对this.setState({theVar: theValue} )

的调用

致电setState()会触发Next

的渲染

Next的render()方法变为

render() {
  return (
    <div>
      <Random variable={this.state.theVar}></Random>
      <button>Next</button>
    </div>
  );
}

修改为了完整起见，触发Next的 parent 中的State更改并通过Next的props传递值将获得相同的结果。这就是Flux（模块化商店）中“控制器视图”概念背后的想法

我应该如何构建一个每次都以不同方式呈现组件的React项目？

2 个答案: