小编典典
阅读 247
2020-07-22
尝试访问数组后，React组件返回无法读取null的属性'__reactInternalInstance $
reactjs这是有问题的组件。
const UserList = React.createClass({
render: function(){
let theList;
if(this.props.data){
theList=this.props.data.map(function(user, pos){
return (
<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>
</div>
);
}, this);
} else {
theList = <div>I don't know anymore</div>;
}
console.log(theList);
return (
theList
);
}
});
每当我尝试返回{theList}时，都会收到 无法读取属性’__reactInternalInstance $
mincana79xce0t6kk1s5g66r’的
错误。但是，如果我用静态html替换{theList}，console.log将打印出我想要的正确对象数组。根据答案，我尝试同时返回{theList}和TheList，但这没有帮助。
在这两种情况下，console.log都首先打印出[]，我认为这是因为componentDidMount包含我的ajax调用以从服务器获取json，并且尚未在第一个render（）之前触发。我尝试检查this.props.data是否为null，但无济于事。
如果有帮助，以下是父组件：
const Leaderboard = React.createClass({
getInitialState: function(){
return ({data: [], mode: 0});
},
componentDidMount: function(){
$.ajax({
url: 'https://someurlthatreturnsjson',
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error('https://someurlthatreturnsjson', status, err.toString());
}.bind(this)
});
},
render: function(){
return (
<div className="leaderboard">
<div className="row titleBar">
<img src="http://someimage.jpg"></img>Leaderboard
</div>
<HeaderBar />
<UserList data={this.state.data}/>
</div>
);
}
});
阅读 247
2020-07-22
共1个答案
小编典典
好的，这里存在一些有趣的问题，但是您是 如此亲密
。具有react的大对象必须始终返回单个顶级元素（例如div）。因此，您的变量theList实际上是一个div数组。您不能直接退货。但是，如果将其包装在单个父div中，则可以将其返回。
const mockData = [
{
username: 'bob',
recent: 'seven',
alltime: 123,
},
{
username: 'sally mae',
recent: 'seven',
alltime: 133999,
},
];
var $ = {
ajax(opt) {
setTimeout(() => {
opt.success(mockData);
}, 200);
}
}
const UserList = React.createClass({
render: function(){
let theList;
if (this.props.data && this.props.data.length) {
theList = this.props.data.map(function(user, pos){
return (
<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>
</div>
);
});
} else {
theList = <div>There is NO data</div>;
}
return <div>{theList}</div>;
}
});
const Leaderboard = React.createClass({
getInitialState: function(){
return ({data: [], mode: 0});
},
componentDidMount: function(){
$.ajax({
url: 'https://someurlthatreturnsjson',
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error('https://someurlthatreturnsjson', status, err.toString());
}.bind(this)
});
},
render: function(){
return (
<div className="leaderboard">
<UserList data={this.state.data}/>
</div>
);
}
});
ReactDOM.render(
<Leaderboard/>,
document.getElementById('container')
);
.col {
width: 200px;
float: left;
}
<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="container">
<!-- This element's contents will be replaced with your component. -->
</div>
解释一点小提琴。不用担心看起来var $很奇怪的东西，我只是使用jQuery的ajax方法，这样我可以在200ms之后返回一些假数据。
另外，对我来说，jsfiddle在运行它时会给我一个“错误的配置”消息，但是我关闭了消息，结果就在那里。不知道那是什么。
2020-07-22