这是有问题的组件。
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} 时，我都会收到一个 Cannot read property '__reactInternalInstance$mincana79xce0t6kk1s5g66r' of null 错误。但是，如果我用静态 html 替换 {theList}，console.log 会打印出我想要的正确对象数组。根据答案，我尝试同时返回 {theList} 和 theList，但这没有帮助。
在这两种情况下，console.log 首先打印出 []，我认为这是因为 componentDidMount 包含我从服务器获取 json 的 ajax 调用，并且在第一个 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>
);
}
});
最佳答案
啊好的，这里有一些有趣的问题，但你非常接近。最重要的是，对于 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>
稍微解释一下 fiddle 。不要担心那些看起来很奇怪的 var $ 东西，我只是去掉了 jQuery 的 ajax 方法，这样我就可以在 200 毫秒后返回一些假数据。
另外，对我来说，当我运行 jsfiddle 时，它会给我一个“错误的配置”消息，但我关闭了消息，结果就在那里。不知道那是关于什么的。
关于javascript - 尝试访问数组后，React 组件返回无法读取 null 的属性 '__reactInternalInstance$，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38653696/
io.js的第一个版本这个月出来了，我正在阅读文档时发现smallocio.js中引入的新模块。直到今天，我从未觉得有必要在JavaScript中这样做。我的问题是:Iwonderifthereisreallyaneedofrawmemoryallocationinjavscriptusingsmalloc?Ifitsneededthenwhy?whatwouldbetheusecaseforusingsmalloc?andifnotthenwhydidio.jsmembersaddthismodule?它还说可以指定您想要的外部数组数据类型。smalloc.Types中列出了所有可能
我正在尝试ng-repeat嵌套对象属性并对它们进行排序，但排序对我不起作用。我看过这个:HowtoorderbyinAngularJSusingNestedproperty但是json结构不同，我无法让它工作。Plunker我的代码:<divng-repeat="itemindata|orderBy:order.allListPosition"><div>{{item.name}}-{{item.order}}</div></div>范围:$scope.data={"78962":{"id"
我是AngularJS的新手，如果这很明显，请原谅我，但我正在寻找可以回答这个棘手问题的人。我正在实现一个应用程序，需要将一些参数传递给特定View以显示有关书籍的详细信息。基本上我希望能够使用以下路由表达式:bookApp.config(['$routeProvider',function($routeProvider){$routeProvider.when('/catalog',{templateUrl:'cataloglist.htm',controller:'catCtrl'}).when('/book/
简要说明将测试服务器重置为已知状态会导致我的测试失败，因为DataTables实例启动的Ajax请求在服务器重置时正在进行。我想通过在重置服务器之前停止DataTables请求来防止这种情况。详细说明我有一个在某些页面上使用数据表的应用程序。这些数据表都执行服务器端查询来填充它们的表。当我执行系统测试时，有时会发生竞争条件:测试运行器启动测试服务器。测试运行器在测试浏览器中加载一个页面，其中某处有一个DataTable实例。测试运行器运行测试，执行检查并结束。测试运行器将测试服务器重置为下一个测试的已知状态。页面上出现一条警告，指出DataTables遇到了Ajax错误。警报说:Dat
我需要删除破折号以外的所有非数字字符。这是我的尝试(基于:Regextogetallalphanumericfieldsexceptforcomma,dashandsinglequote):varstripped=mystring.replace(/[-0-9]+/g,'');但这行不通:-( 最佳答案 我建议:varstripped=string.replace(/[^0-9\-]/g,'');JSFiddledemo.字符类中的^(在[和]中)是NOT运算符，因此它匹配的字符不是0-9或(转义的)
我正在使用apachehttpd服务器来托管客户端文件http://ipaddress:8010/我的Nodejs服务器运行在http://ipaddress:8087当我发送post请求时，它显示以下错误XMLHttpRequestcannotloadhttp://ipaddress:8010/.No'Access-Control-Allow-Origin'headerispresentontherequestedresource.Origin'http://ipaddress:8087'isthereforenotallowedaccess.我的客户
我尝试使用Tween.js在Three.js中对camera.lookAt进行补间，但收效甚微。这行得通selectedHotspot=object;vartween=newTWEEN.Tween(camera.lookAt(object.position),600).start();而是将相机直接旋转到object.position。如何获得平滑的旋转？这是渲染函数functionupdate(){lat=Math.max(-85,Math.min(85,lat));phi=THREE.Math.degToRad(90-lat);theta=THREE.Math.degToRad(l
我有一个文本输入。我写了一个正则表达式来屏蔽除.和-之外的所有特殊字符。现在，如果用户在输入中错误地输入了两个.(点)，则使用当前的正则表达式varvalueTest='225..36'valueTest.match(/[^-.\d]/)我预计该数字不会通过此条件如何处理这种情况。我只想要输入字段中的一个.(点)，因为它是一个数字。 最佳答案 我想你是这个意思，^-?\d+(?:\.\d+)?$DEMO它允许带或不带小数点的正数和负数。解释:^断言我们在开始。-?可选的-符号。\d+匹配一个或多个数字。(?:非捕获组
我正在尝试学习javascript正则表达式，但遇到了一个问题。我正在尝试使用以下规则进行验证。只允许:Numbers0-9()+-(space)我想出了下面的正则表达式来处理这个问题:/[0-9\)\(\+\-]+/i以下匹配但不应匹配，因为它包含@符号:+0@1220012我正在使用下面的测试:(返回true)/[0-9\)\(\+\-]+/i.test("+0@1220012")谢谢。 最佳答案 您的正则表达式不会匹配“@”字符，但不必为了.test()调用返回true而必须匹配。字符串中的某处必须存在匹配项。
我使用Node作为http服务器，代码如下:http.createServer(function(req,res){}).listen(8181);我正在寻找一种从同一进程中监视Nodejshttp服务器的简单方法。对我来说，有一个自己的函数就足够了，它只将当前资源使用情况和连接计数输出为json。现在我不需要深度测量或实时性能监控。Nodehttp服务器的关键性能指标是什么，是否可以从Node获取它们？如果是如何？您对以下kpi的看法:连接数CPU使用率内存使用情况只需要知道我需要哪些变量/函数来获取数据？非常感谢你的帮助 最佳答案
io.js的第一个版本这个月出来了，我正在阅读文档时发现smallocio.js中引入的新模块。直到今天，我从未觉得有必要在JavaScript中这样做。我的问题是:Iwonderifthereisreallyaneedofrawmemoryallocationinjavscriptusingsmalloc?Ifitsneededthenwhy?whatwouldbetheusecaseforusingsmalloc?andifnotthenwhydidio.jsmembersaddthismodule?它还说可以指定您想要的外部数组数据类型。smalloc.Types中列出了所有可能
我正在尝试ng-repeat嵌套对象属性并对它们进行排序，但排序对我不起作用。我看过这个:HowtoorderbyinAngularJSusingNestedproperty但是json结构不同，我无法让它工作。Plunker我的代码:<divng-repeat="itemindata|orderBy:order.allListPosition"><div>{{item.name}}-{{item.order}}</div></div>范围:$scope.data={"78962":{"id"
我是AngularJS的新手，如果这很明显，请原谅我，但我正在寻找可以回答这个棘手问题的人。我正在实现一个应用程序，需要将一些参数传递给特定View以显示有关书籍的详细信息。基本上我希望能够使用以下路由表达式:bookApp.config(['$routeProvider',function($routeProvider){$routeProvider.when('/catalog',{templateUrl:'cataloglist.htm',controller:'catCtrl'}).when('/book/
简要说明将测试服务器重置为已知状态会导致我的测试失败，因为DataTables实例启动的Ajax请求在服务器重置时正在进行。我想通过在重置服务器之前停止DataTables请求来防止这种情况。详细说明我有一个在某些页面上使用数据表的应用程序。这些数据表都执行服务器端查询来填充它们的表。当我执行系统测试时，有时会发生竞争条件:测试运行器启动测试服务器。测试运行器在测试浏览器中加载一个页面，其中某处有一个DataTable实例。测试运行器运行测试，执行检查并结束。测试运行器将测试服务器重置为下一个测试的已知状态。页面上出现一条警告，指出DataTables遇到了Ajax错误。警报说:Dat
我需要删除破折号以外的所有非数字字符。这是我的尝试(基于:Regextogetallalphanumericfieldsexceptforcomma,dashandsinglequote):varstripped=mystring.replace(/[-0-9]+/g,'');但这行不通:-( 最佳答案 我建议:varstripped=string.replace(/[^0-9\-]/g,'');JSFiddledemo.字符类中的^(在[和]中)是NOT运算符，因此它匹配的字符不是0-9或(转义的)
我正在使用apachehttpd服务器来托管客户端文件http://ipaddress:8010/我的Nodejs服务器运行在http://ipaddress:8087当我发送post请求时，它显示以下错误XMLHttpRequestcannotloadhttp://ipaddress:8010/.No'Access-Control-Allow-Origin'headerispresentontherequestedresource.Origin'http://ipaddress:8087'isthereforenotallowedaccess.我的客户
我尝试使用Tween.js在Three.js中对camera.lookAt进行补间，但收效甚微。这行得通selectedHotspot=object;vartween=newTWEEN.Tween(camera.lookAt(object.position),600).start();而是将相机直接旋转到object.position。如何获得平滑的旋转？这是渲染函数functionupdate(){lat=Math.max(-85,Math.min(85,lat));phi=THREE.Math.degToRad(90-lat);theta=THREE.Math.degToRad(l
我有一个文本输入。我写了一个正则表达式来屏蔽除.和-之外的所有特殊字符。现在，如果用户在输入中错误地输入了两个.(点)，则使用当前的正则表达式varvalueTest='225..36'valueTest.match(/[^-.\d]/)我预计该数字不会通过此条件如何处理这种情况。我只想要输入字段中的一个.(点)，因为它是一个数字。 最佳答案 我想你是这个意思，^-?\d+(?:\.\d+)?$DEMO它允许带或不带小数点的正数和负数。解释:^断言我们在开始。-?可选的-符号。\d+匹配一个或多个数字。(?:非捕获组
我正在尝试学习javascript正则表达式，但遇到了一个问题。我正在尝试使用以下规则进行验证。只允许:Numbers0-9()+-(space)我想出了下面的正则表达式来处理这个问题:/[0-9\)\(\+\-]+/i以下匹配但不应匹配，因为它包含@符号:+0@1220012我正在使用下面的测试:(返回true)/[0-9\)\(\+\-]+/i.test("+0@1220012")谢谢。 最佳答案 您的正则表达式不会匹配“@”字符，但不必为了.test()调用返回true而必须匹配。字符串中的某处必须存在匹配项。
我使用Node作为http服务器，代码如下:http.createServer(function(req,res){}).listen(8181);我正在寻找一种从同一进程中监视Nodejshttp服务器的简单方法。对我来说，有一个自己的函数就足够了，它只将当前资源使用情况和连接计数输出为json。现在我不需要深度测量或实时性能监控。Nodehttp服务器的关键性能指标是什么，是否可以从Node获取它们？如果是如何？您对以下kpi的看法:连接数CPU使用率内存使用情况只需要知道我需要哪些变量/函数来获取数据？非常感谢你的帮助 最佳答案