这是有问题的组件。
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/
一、题目给你一个整数数组ranks和一个字符数组suit。你有5张扑克牌,第i张牌大小为ranks[i],花色为suits[i]。下述是从好到坏你可能持有的手牌类型:“Flush”:同花,五张相同花色的扑克牌。“ThreeofaKind”:三条,有3张大小相同的扑克牌。“Pair”:对子,两张大小一样的扑克牌。“HighCard”:高牌,五张大小互不相同的扑克牌。请你返回一个字符串,表示给定的5张牌中,你能组成的最好手牌类型。注意:返回的字符串大小写需与题目描述相同。来源:力扣(LeetCode)链接:https://leetcode.cn/problems/best-poker-hand/d
声明:我仅是贴出我认为正确的答案,不是标准答案!第一题解析:打开ISP看到下面两个文件类型,我就选了BC第二题解析:比赛给的《STC15系列单片机用户手册》P301,可以看到是可以位寻址的都能够被8整除,不能够被8整除的无法进行位操作,SCON的地址为98H,P4的地址为C0H,可以位寻址。PCON的地址为87H,AUXR的地址为8EH无法位寻址,所以应该选AC第三题解析:感觉都对,我选了ABCD第四题解析:考察二极管与门知识,D1、D2、D3有一个接地,那么U0就是0(因为是理想二极管,没有导通压降)所以我选A第五题解析:这个我也不确定,我选A可以看看这个的链接:单片机程序的存放第六题解析:
我正在生成一个表示折线图的大型SVG路径字符串。在图表下方,我有一个用于选择时间范围切片的slider。slider后面是整个折线图的迷你预览。我目前正在按比例缩小生成预览的路径,但是在这样做时我最终每个像素有数十个节点,因此需要更多的细节。当然,这给了浏览器更多的渲染任务。关于压缩svg字符串(gzipping等)的信息很多,但关于通过减少节点实际简化路径的算法的信息很少。我正在使用Raphaeljs并正在寻找基于javascript的解决方案。有什么想法吗? 最佳答案 Simplify.js可能是您正在寻找的东西。鉴于您的折线图
将支持node.js中的原始套接字,例如创建ping数据包? 最佳答案 名为node-raw-socket的新模块使用nodejs为真正的原始套接字提供完美的解决方案。并且,为了创建ping(ICMP)数据包,同一开发人员还有一个基于node-raw-sockets的非常好的工作(使用它)解决方案:node-net-ping. 关于javascript-将支持node.js中的原始套接字,例如创建ping数据包?,我们在StackOverflow上找到一个类似的问题:
有一个简单的链接01.TheNameofTrack如何在用户点击链接时播放mp3文件?请帮助我找到一些简单有效的解决方案。谢谢。感谢您的帮助。我选择了这个解决方案http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/最适合我的情况。 最佳答案 使用HTML5Yourbrowserdoesnotsupporttheaudioelement.document.getElementById("link_id").addEventListener("cli
所以我正在尝试使用consolidate.js渲染swigtemplates使用express,但是当我尝试从另一个模板“扩展”一个模板时出现以下错误:Error:ENOENT,nosuchfileordirectory'//one.html在我的app.js文件中,我将swig设置为我的渲染引擎(仅包括相关代码):varconsolidate=require('consolidate');app.set('viewengine','html');app.set('views',__dirname+'/views');app.engine('.html',consolidate.swi
我正在尝试为一个对象编写OOjavascript,该对象具有昂贵的初始化过程,完成后会回调一个函数。问题在于调用者需要在回调例程中使用同一对象的函数,而该对象尚不存在://ctorforfooobjectfunctionfoo(callback){//doslowinitializationhere..//callbackwhendonecallback();};foo.prototype=function(){return{//doStuffmethoddoStuff:function(){alert('stuffdone');}};}();//instantiatethefooob
1.复制CURL在需要抓取url的网址中打开F12进行调试,打开Network 右键点击选择copy下的curlbash 2.postman导入打开postman点击import打开后就是下面这个页面选择Rawtext在下方的Pasterawtext粘贴上你需要请求的curl粘贴后点击高亮continue按钮 点击后会有新弹窗再点击import 保存后可直接send发送 3.postmancode生成 看了很多postman里自动生成code的教程,非常动心,但是打开自己的postman却没找到那个传说中在cookies旁边的code按钮。新版postman的code按钮如下图所示选择自己想
这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:HowdoIoutputanISO-8601formattedstringinJavascript?如果我有一个以毫秒为单位表示日期的整数,将其转换为iso格式的语法是什么?
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。我通常会看到版本1,但我从事的一些开源项目使用版本2,而我过去也使用过版本3。有没有人有更优雅的解决方案,也许是更具可扩展性的解决方案?版本1:vartext1='thisismyscript\'scontent';版本2:Thisismycontentvartext1=$('#text1').html();版本3:vartext1=$('#text1'