ReactCode

Question

实际学习ReactJS所以我已经制作了一个应用程序＆＃34;这将使用Fetch请求加载笑话异步并将其加载到页面上。

ReactCode

class App extends React.Component {
    constructor(props) {
       super(props);
       this.state = { 
           data : [],
        }
     }
    componentDidMount(){
     this.postdata()
    }

    postdata(){
        var initial_data = {'id': 1, 'model-name': 'Joke'}
        var self = this;
            fetch("\start-jokes\/", {
            body: JSON.stringify(initial_data),
            cache: 'no-cache', 
            credentials: 'same-origin', 
            headers: {
            'user-agent': 'Mozilla/4.0 MDN Example',
            'content-type': 'application/json'
            },
            method: 'POST',
            mode: 'cors', 
            redirect: 'follow',
            referrer: 'no-referrer',
            })
            .then(response => response.json()).then((json) => {
              self.setState({ data : json.data }) // which ever the key hold the data 
            })
    }

    render(){
       return( 
            <div>
            {this.state.data.length == 0 && 
               <div> No options available.</div>
            }
            {this.state.data.length > 0 && 
              <div className="container" id="jokes">
                   {this.state.data.map(function(item,i){
                          return(
                                <div key={i} className="card col-md-7">
                                <div className="card-body">
                                {item}   // here you are getting object in item. Get the key from the object like item.name
                                </div>
                                </div>
                      )
                   })}
               </div>
            }
          </div>
         )
    }
}
// ========================================

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

然而，它会在控制台中记录此错误消息。

TypeError: this.state.data is undefined

this.state.data在render中被引用两次，而data中已声明constructor。

可能的原因是它没有从构造函数中获取它因此失败。

更新

感谢我的建议，我已尝试记录console.log(json.data)，并且正如预测回来undefined但是我确定已经正确地发回了数据，只是它以{{}返回{1}}并且可能需要一种不同的方式来访问数据。

控制台日志Object响应返回此json

Answer 1

您在此处指定json.data：

.then(response => response.json()).then((json) => {
  self.setState({ data : json.data }) // which ever the key hold the data 
})

未定义。

Answer 2

renderList = () => {
    if (this.state.data){
        return this.state.data.map(function(item,i){
                return(
                    <div key={i} className="card col-md-7">
                        <div className="card-body">
                            {item}
                        </div>
                    </div>
            )
        })
    }
}

render(){
        let html = this.state.data?(
            <div className="container" id="jokes">
                {this.renderList()}
            </div>
        ) : (<div> No options available.</div>) 
       return( 
            <div>
                {html}
            </div>
         )
    }

尝试重构一下你的代码。在进行渲染操作之前，始终执行空检查。始终使用箭头函数，否则您必须在类的构造函数中手动绑定函数。

希望这有帮助。

ReactJS错误：TypeError：this.state.data未定义

ReactCode

更新

2 个答案: