Question

我是ES6的新手并且仍在尝试掌握新规范的概念，我目前正在研究React中的一个组件，我需要进行ajax调用并将此响应存储在一个对象中。然后使用此对象来映射必要的元素

我的组件如下所示

export class App extends Component {
    search(){
      //make ajax call
      response = obj.responseText;
    }

    getValues(){}

    render(){
     let result = response.data.map(this.getValues);
     return(
       <div onKeyDown={this.search.bind(this)}>{result}</div>
     )
    }

}

如何全局声明“响应”变量，该变量从ajax调用“obj.responseText”中分配数据？

Answer 1

看起来你知道自己想要达到什么目标，但对如何实现这一目标感到有些困惑。

我会高度建议您在继续阅读之前阅读React documentation。

为什么不是全局变量？

如何全局声明response变量？

简而言之，不要。全局变量为well-documented as being evil。在具有全局变量的页面中，该组件的一个实例可以存储其搜索结果，但想象一下，如果您有两个或更多实例 - 它们将共享/覆盖彼此的搜索结果。

介绍州

相反，您希望使用React的组件状态功能来存储搜索结果。

您可以通过在其构造函数中设置组件this.state来设置初始状态（或者在ES5中，在组件上定义getInitialState方法）。

然后，只要您想要更新组件的状态，就可以调用其this.setState(...)方法，传入一个新的状态对象。这也将触发重新渲染组件。

实施例

以下是遵循上述模式的简单实现：

export class App extends Component {

  // Set the initial state of the component in the constructor
  constructor(props) {
    super(props);
    this.state = {};
  }

  // This gets called when your component is mounted
  componentDidMount() {
    // Here we make our AJAX call. I'll leave that up to you
    performMyAjaxMethodDefinedSomewhereElse(result => {

      // We call this method to update `this.state` and trigger re-rendering
      this.setState({ result });
    });
  }

  render() {
    // If we haven't received any results yet, display a message
    if (!this.state.result) {
      return (
        <div>No results!</div>
      );
    }

    // Iterate over the results and show them in a list
    const result = this.state.result.map(text => (<li>{text}</li>));

    // Display the result
    return (
      <ul>{result}</ul>
    );
  }
}

当然，如果您不希望AJAX调用立即启动，您可以使用非常类似的方法，将componentDidMount替换为看起来几乎相同的事件处理程序。

在React组件中为ES6分配属性

1 个答案:

为什么不是全局变量？

介绍州

实施例