尝试访问数组后，返回的 React 组件无法读取 null 的属性 '__reactInternalInstance$ [英] React component returning cannot read property '__reactInternalInstance$ of null after trying to access array

问题描述

这是有问题的组件.

const UserList = React.createClass({渲染:函数(){让列表；如果(this.props.data){theList=this.props.data.map(function(user, pos){返回 (<div className="row user"><div className="col-xs-1">{pos}</div><div className="col-xs-5">{user.username}</div><div className="col-xs-3">{user.recent}</div><div className="col-xs-3">{user.alltime}</div>

);}， 这个);} 别的 {theList = <div>我不知道了</div>;}控制台日志(列表)；返回 (列表);}});

每当我尝试返回 {theList} 时，我都会收到 无法读取 null 的属性 '__reactInternalInstance$mincana79xce0t6kk1s5g66r' 错误.但是，如果我用静态 html 替换 {theList}，console.log 会打印出我想要的正确对象数组.根据答案，我试图同时返回 {theList} 和 theList 但这没有帮助.

在这两种情况下，console.log 首先打印出 []，我认为这是因为 componentDidMount 包含我从服务器获取 json 的 ajax 调用，并且在第一次 render() 之前还没有触发.我试图检查this.props.data 为 null 但它没有帮助.

如果有帮助，这里是父组件:

const 排行榜 = React.createClass({getInitialState: 函数(){返回({数据:[]，模式:0})；},componentDidMount: 函数(){$.ajax({url: 'https://someurlthatreturnsjson',数据类型:'json'，缓存:假，成功:功能(数据){this.setState({数据: 数据});}.bind(this),错误:函数(xhr，状态，错误){console.error('https://someurlthatreturnsjson', status, err.toString());}.绑定(这个)});},渲染:函数(){返回 (<div className="排行榜"><div className="row titleBar"><img src="http://someimage.jpg"></img>排行榜

<HeaderBar/><用户列表数据={this.state.data}/>

);}});

解决方案

好吧，这里有一些有趣的问题，但你如此接近.最重要的是，使用 react，您必须始终返回单个顶级元素(例如 div).所以，你的变量 theList 实际上是一个 div 数组.你不能直接返回那个.但是如果它包含在单个父 div 中，您可以返回它.

const mockData = [{用户名:'鲍勃'，最近:'七'，历史上:123，},{用户名:'sally mae',最近:'七'，一直以来:133999，},];无功 $ = {阿贾克斯(选择){setTimeout(() => {opt.success(mockData);}, 200);}}const UserList = React.createClass({渲染:函数(){让列表；如果(this.props.data && this.props.data.length){theList = this.props.data.map(function(user, pos){返回 (<div key={user.username} className="row user"><div className="col">{pos}</div><div className="col">{user.username}</div><div className="col">{user.recent}</div><div className="col">{user.alltime}</div>

);});} 别的 {theList = <div>没有数据</div>;}返回<div>{theList}</div>;}});const 排行榜 = React.createClass({getInitialState: 函数(){返回({数据:[]，模式:0})；},componentDidMount: 函数(){$.ajax({url: 'https://someurlthatreturnsjson',数据类型:'json'，缓存:假，成功:功能(数据){this.setState({数据: 数据});}.bind(this),错误:函数(xhr，状态，错误){console.error('https://someurlthatreturnsjson', status, err.toString());}.绑定(这个)});},渲染:函数(){返回 (<div className="排行榜"><用户列表数据={this.state.data}/>

);}});ReactDOM.render(<排行榜/>,document.getElementById('容器'));

.col {宽度:200px；向左飘浮;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script><div id="容器"><!-- 此元素的内容将替换为您的组件.-->