代码之家 › 专栏 › 技术社区 › Pavindu

读取jsx中的数组值

reactjs arrays

Pavindu · 技术社区 · 7 年前

在我的Next.JS应用程序中,我将一个数组作为道具传递给 OrderViewer

未处理的拒绝(TypeError):无法读取null的属性“0”

getOrderData = ID => {
  if (ID !== null){
    this.prt.style.display = "block";
    console.log(ID) //This works well.but it doesn't work inside JSX.
    console.log(`type = ${typeof(ID)}`)
  }
}

render(){
  return(
    <div ref={ref => this.prt = ref} onLoad= {this.getOrderData(this.props.orderId)} style={{display: "none"}}>
      <div id="OOP" className="row">
        <div className={"row"}>
          <div className="col-md-1">{this.props.orderId}</div>
          <div className="col-md-10"></div>
          <div className="col-md-1"></div>
        </div>
        <div></div>
      </div>
    </div>)
}

1 回复 | 直到 7 年前

Sahil Raj Thapa 7 年前

在代码中, Orders 组件具有 state

constructor(props){
  super(props);
  this.state = {
    orderId: null
  }

你通过了组件状态作为 OrderViewer 组成部分

<OrderViewer orderId={this.state.orderId}/>

在…内组成部分

 // Remember "this.props.orderId" is null 
        getOrderData = ID => {  
            // ID is equal to null so this block is not executed 
            if (ID !== null){
                this.prt.style.display = "block";
                console.log(ID[0]) 
            }
        }

        render(){
            return(
                <div ref={ref => this.prt = ref} onLoad= 
        {this.getOrderData(this.props.orderId)} style={{display: "none"}}>
                    <div id="OOP" className="row">
                       <div className={"row"}>
                         // <div className="col-md-1">{this.props.orderId[0] !== null ? this.props.orderId[0] : " "}</div>                              
                                                         // ^^^^^^^^ you are trying to 
                                                         // access "0" index element of null
                            <div className="col-md-10"></div>
                            <div className="col-md-1"></div>
                        </div>
                        <div></div>
                    </div>

<div className="col-md-1">{this.props.orderId[0] !== null ? this.props.orderId[0] : " "}</div>

到

<div className="col-md-1">{this.props.orderId !== null ? this.props.orderId[0] : ""}</div>

或

<div className="col-md-1">{this.props.orderId && this.props.orderId[0]}</div>

两者都将检查 orderId 做了些什么。

在第二种情况下,如果 医嘱ID 如果为null/false,它将不会在“&”运算符之后执行代码,如果不是null/true,它将在“&”运算符之后执行代码,即它将从 医嘱ID

推荐文章

Megrez7 · C#ToArray转换合并为一行,导致数组元素更改

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

Anka HanÄ±m · 关于结构和动态数组地址的问题

1 年前

Swapnil Supekar · 将二维阵列转换为一维阵列,并将一维阵列粘贴到另一张图纸上

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

MaSc. H. · 大小与阵列大小

1 年前

Geremia · 2D NumPy数组+1D数组?

1 年前

MARTIN · 交换第一个和最后一个单词,反转所有中间的字符

1 年前

Paul Williams · 迭代数组时输出有问题

1 年前

Oliver Morgan · PostgreSQL错误:无法累积不同维度的数组

1 年前