TOGOUTECH

javascript - 尝试访问数组后,React 组件返回无法读取 null 的属性 '__reactInternalInstance$

coder 2024-05-16 原文

这是有问题的组件。

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/

有关javascript - 尝试访问数组后,React 组件返回无法读取 null 的属性 '__reactInternalInstance$的更多相关文章

  1. c# - 如何使用 EF 4.x DbContext 生成器获取属性更改通知 - 2

    我正在使用EntityFramework4.3,因此我使用DbContextGenerator来创建上下文和实体类。使用默认的EF4代码生成器模板,实体类实现INotifyPropertyChanged,并在属性setter中添加Changing和Changed分部方法。当我使用EF4.xDbContext生成器时,如下图所示,实体类要轻得多,并且不包括任何跟踪属性更改的方法。这是一个例子://------------------------------------------------------------------------------//<auto-generate

  2. c# - 设置 MVC 应用程序后访问被拒绝错误 - 2

    Accessisdenied.Description:Anerroroccurredwhileaccessingtheresourcesrequiredtoservethisrequest.TheservermaynotbeconfiguredforaccesstotherequestedURL.Errormessage401.2.:Unauthorized:Logonfailedduetoserverconfiguration.Verifythatyouhavepermissiontoviewthisdirectoryorpagebasedonthecredentialsyousup

  3. c# - 自动实现属性中的私有(private)变量在哪里/什么? - 2

    没有(显式)引用FirstName应该隐藏的firstName私有(private)变量。你能解释一下这是如何工作的吗?我假设正在获取和设置一些私有(private)变量。谢谢。//auto-implementedpropertyFirstNamepublicstringFirstName{get;set;} 最佳答案 基本上,编译器会将您的代码转换成如下内容:privatestring<__>firstName;publicstringFirstName{get{return<__>firstName;}s

  4. c# - 如何使用 LINQ 获取 int 数组中的前 3 个元素? - 2

    我有以下整数数组:int[]array=newint[7]{1,3,5,2,8,6,4};我编写了以下代码来获取数组中的前3个元素:vartopThree=(fromiinarrayorderbyidescendingselecti).Take(3);当我检查topThree中的内容时,我发现:{System.Linq.Enumerable.TakeIterator}count:0我做错了什么,我该如何更正我的代码? 最佳答案 您如何“检查topThree中的内容”?最简单的方法是将它们打印出来:usingSystem;usingS

  5. c# - 复选框不适用于 bool View 模型属性 - 2

    我正在使用MVC6并且在我的表单中有一个复选框输入字段,但是当提交表单时,复选框的值总是作为false传递给ViewModel:这是在我的ViewModel中声明属性的方式:[Display(Name="IncludeSalesTax")]publicboolIncludeSalesTax{get;set;}下面是我的MVC6razor表单中的表单:<divclass="form-group"><divclass="checkbox"><label><inputasp-for="Inclu

  6. c# - StartsWith 方法 C# 不返回 TRUE - 2

    我从MSSQL数据库中读取了一些值,我喜欢对字符串进行一些操作。这是我用来检查某个字符串是否以另一个字符串开头的代码:Stringinput="ОсновнотоjавнообвинителстводенескаподнесепријавапротивБМ(59)одБитолазарадипостоењеосновинасомнениедекасторилкривичнидела„тешкиделапротивбезбедностаналуѓетоиимототвосообраќајот“и„неукажувањепомошналицеповреденовосообраќај

  7. c# - 无法为泛型类型创建 TypeConverter - 2

    我想创建一个TypeConverter对于通用类,像这样:[TypeConverter(typeof(WrapperConverter<T>))]publicclassWrapper<T>{publicTValue{//get&set}//othermethods}publicclassWrapperConverter<T>:TypeConverter<T>{//onlysupportToandFromstringspublicoverrideboolCanConvertFrom(ITypeDescriptorContextcon

  8. c# - 无法加载文件或程序集临时 ASP.NET 文件 - 2

    我正在使用C#(.NETFramework4)在ASP.NET上开发一个网站。创建新网站项目后,我尝试运行该项目。但我收到以下错误:Couldnotloadfileorassembly'file:///C:\Windows\Microsoft.NET\Framework\v4.0.30319\TemporaryASP.NETFiles\myfirst\159977c5\b9e740fc\App_global.asax.yfqtni9g.dll'oroneofitsdependencies.Thesystemcannotfindthefilespecified.我已经浏览

  9. c# - 不使用 Array.Reverse() 反转数组 - 2

    如何在不使用Array.Reverse()方法的情况下反转数组(在C#中)?例如,int[]arr={1,3,4,9,8};//somecodehereConsole.WriteLine(string.Join(",",arr));应该导致8,9,4,3,1我得到这个作为面试任务。 最佳答案 要替换问题中的//somecodehere的代码是:for(inti=0;i<arr.Length/2;i++){inttmp=arr[i];arr[i]=arr[arr.Length-i-1];arr[arr.Lengt

  10. c# - 正确使用 C# 属性 - 2

    privateList<Date>_dates;publicList<Date>Dates{get{return_dates;}set{_dates=value;}}或publicList<Date>Dates{get;set;}我一直使用前者,这是不正确的做法还是不好的做法?我从来没有想过我可以只使用第二个选项。我确实喜欢让我的封装变量以下划线开头,这样我就可以将它们与方法参数区分开来。我一直都是这样做的。是否有可能使用第一个选项会导致额外的List<Date>对象被实例化,然后整个_dates被替换为value,还是比这更聪明?此外,

随机推荐

  1. c# - MVC RequireHttps 如果不是 https 则重定向 - 2

    我已经通读了许多关于ASP.NETMVC[RequireHttps]的问题-但找不到这个问题的答案:如果开头不是https,如何使[RequireHttps]属性将url切换为https?我有这个代码:publicActionResultDoSomething(){returnView("AnotherAction");}[RequireHttps]publicActionResultAnotherAction(){returnView();}但我收到一条错误消息:“请求的资源只能通过SSL访问。”MVCfutures项目有一个类似的属性[RequireSsl(Redi

  2. C#:显示一个不可见的窗体 - 2

    我在C#中有以下代码:Formf=newMyForm();f.Visible=false;f.Show();f.Close();尽管有f.Visible=false,我还是看到了窗体的闪光,然后消失了。我需要做什么才能使此表单不可见?我需要在我的应用启动期间(不可见地)显示表单,因为这样做可以消除显示此表单时的冷启动延迟。 最佳答案 如果你想显示表单而不实际看到它,你可以这样做:publicForm1(){InitializeComponent();this.FormBorderStyle=System.Windows.Forms.

  3. c# - 解码Base64图像 - 2

    我在HTML中嵌入了一个Base64图像,如何使用C#或VB.net对其进行解码。 最佳答案 google.com>base64图像解码c#>http://www.eggheadcafe.com/community/aspnet/2/39033/convert-base64-string-to-image.aspxByte[]bitmapData=Convert.FromBase64String(FixBase64ForImage(ImageText));System.IO.MemoryStreamstreamBitmap=newS

  4. c# - 如果 typeof(int?) 是 Int32,Nullable.GetUnderlyingType 有什么用? - 2

    为什么typeofint?是Int32int?x=1;Console.WriteLine(x.GetType().Name);如果可以,那么Nullable.GetUnderlyingType有什么用? 最佳答案 调用GetType()装箱你的变量。CLR有一条特殊规则Nullable<T>装箱到T.所以x.GetType将返回Int32而不是Nullable<Int32>.int?x=1;x.GetType()//Int32typeof(int?)//Nullable<Int32>自Nullab

  5. c# - 正确使用 C# 属性 - 2

    privateList<Date>_dates;publicList<Date>Dates{get{return_dates;}set{_dates=value;}}或publicList<Date>Dates{get;set;}我一直使用前者,这是不正确的做法还是不好的做法?我从来没有想过我可以只使用第二个选项。我确实喜欢让我的封装变量以下划线开头,这样我就可以将它们与方法参数区分开来。我一直都是这样做的。是否有可能使用第一个选项会导致额外的List<Date>对象被实例化,然后整个_dates被替换为value,还是比这更聪明?此外,

  6. c# - 如果 if 结构的第一部分为假,会发生什么? - 2

    我想知道当程序处理具有多个条件的if结构时会发生什么。我有一个想法,但我不确定。我举个例子:List<string>myTestList=null;if(myTestList!=null&&myTestList.Count>0){//process}列表为空。在处理if语句时,是否会从左到右,一条件不成立就退出if?我已经试过了,似乎没有抛出任何错误,所以我假设上面的解释是对的,但我不确定。 最佳答案 重要的是&&。这是短路,所以永远不会计算Count;从左到右评估条件。还有一个非短路运算符(&),

  7. C# 项目全局 AssemblyInfo - 2

    其中包含多个项目的NET3.5解决方案。有没有一种方法可以创建一个“全局”AssemblyInfo.cs,其中所有项目AssemblyInfo.cs都可以从中引用? 最佳答案 在解决方案根目录的某处创建AssemblyInfoInc.cs,在其中添加全局属性并添加为链接到每个项目。文件添加对话框: 关于C#项目全局AssemblyInfo,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questio

  8. c# - 在 .Net 中获取子字符串时,新字符串是引用相同的原始字符串数据还是复制数据? - 2

    假设我有以下字符串:stringstr1="HelloWorld!";stringstr2=str1.SubString(6,5);//"World"我希望在上面的例子中str2不会复制“World”,而只是最终成为一个指向相同内存空间的新字符串,只是它以偏移量6开头长度为5。实际上,我正在处理一些可能非常长的字符串,出于性能原因,我对它在幕后的工作方式很感兴趣。我对IL不太熟悉,无法对此进行调查。 最佳答案 正如其他人所指出的,CLR在执行子字符串操作时会进行复制。正如您所注意到的,字符串当然可以表

  9. c# - 通过将控件的 ID 属性设置为 "itemPlaceholder"来指定项目占位符 - 2

    我只有一个“Default.aspx”页面和一个ListView控件。为什么我会收到此错误。以前从未发生过“必须在ListView'ListView1'上指定项目占位符。通过将控件的ID属性设置为“itemPlaceholder”来指定项目占位符。项目占位符控件还必须指定runat="server"。”<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="TesterConcepts._Default"%>

  10. c# - 如果类型 T 需要实例化,为什么通用类签名需要指定 new() ? - 2

    我正在编写一个通用类,如下所示。publicclassFoo<T>:whereT:Bar,new(){publicvoidMethodInFoo(){T_t=newT();}}如您所见,类型T的对象_t是在运行时实例化的。为了支持泛型类型T的实例化,该语言强制我将new()放在类签名中。如果Bar是一个抽象类,我会同意这一点,但如果Bar是具有公共(public)无参数构造函数的标准非抽象类,为什么需要这样。如果没有找到new(),编译器会提示以下消息。无法创建变量类型“T”的实例,因为它没有new()约束 最佳答案 因