Javascript 在React组件中使用ES6指定属性

我是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；
}
getValues（）{}
render（）{
让result=response.data.map（this.getValues）；
返回(
{result}
)
}
}

---

如何全局声明从ajax调用“obj.responseText”获得数据的“response”变量？

您似乎知道要实现什么，但对如何实现有点困惑

我强烈建议你在继续之前先阅读这本书

为什么不是全局变量？ 如何全局声明

响应

变量

简言之，不要这样做。全局变量为。在一个页面中使用一个全局变量来存储其搜索结果，这个组件的一个实例就可以了，但是想象一下，如果您有两个或多个实例，它们都将共享/覆盖彼此的搜索结果

介绍国 相反，您希望使用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>
    );
  }
}

导出类应用程序扩展组件{
//在构造函数中设置组件的初始状态
建造师（道具）{
超级（道具）；
this.state={}；
}
//当安装组件时，将调用该函数
componentDidMount（）{
//现在我们进行AJAX调用。我将由您决定
PerformMyAjaxMethodDefinedSomewhere（结果=>{
//我们调用此方法来更新'this.state'，并触发重新渲染
this.setState（{result}）；
});
}
render（）{
//如果我们尚未收到任何结果，请显示一条消息
如果（！this.state.result）{
返回(
没有结果！
);
}
//迭代结果并在列表中显示它们
const result=this.state.result.map（text=>（
{text}
）；
//显示结果
返回(
{result}
);
}
}

---

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

componentDidMount

。

constructor（）{this.response=null；}

，然后将值放入

search（）{this.response=obj.responseText；}

也许？你不需要全局变量，你只需要一个实例属性。你能告诉我们在ES5中是如何做到这一点的吗？顺便说一句，ajax是异步的，所以要考虑到这一点。@Bergi search（）{}是处理ajax的函数，它将附加到其中一个元素上的事件处理程序。您肯定应该首先阅读有关React的更多信息：。