javascript - 在 React 中使用 $.ajax 获取数据不起作用

Question

componentDidMount() {
    $.ajax({
        type: 'post',
        url: 'requests.php',
        data: {requestKey: "hello"}
    }).done(function(data){
        this.setState({
            items: data
        });
    }.bind(this));
 }

 render(){
     let items = this.state.items;
     console.log(items);
     return(
         <div id="tops">
         <h1 className="header">
             What's top!
             <a href="#" className="more">more!</a>
         </h1>
         {items.map(function(item){
             return(
                 <TopsItem
                     img={item.img}
                     heading={item.heading}
                     desc={item.desc}
                 />
             );
         })}
         </div>
     );
}

state.items 中的数据不影响 map 函数中的组件。然而我得到了这个错误:

items.map is not a function

console.log(items); 在 1 秒后工作。

起初它是空的，然后它获取其中的数据。

Answer 1

初始渲染需要你的项目数组出现在你的组件状态中。

你应该像这样在构造函数中初始化项目

this.state = {
    items = []
}