Question

我收到此错误“TypeError：无法读取 null 的属性（读取‘长度’）”

2021-12-21

673

javascript reactjs

import React from 'react';
import {MinCont} from "./MinCont";

export const Contain = (props) => {
    let myStyle = {
        minHeight: "100vh",
        margin: "40px auto"
    }
    let empty = {
        color: "red",
    }
    return (
        <div className="container my-3" style={myStyle}>
            <h3 className="my-3">Contain Works!!!</h3>
            <h6 className="my-1" style={empty}>
            {props.contains.length === 0? "No Contain To Display":
            props.contains.map((contain) => {
                return (<MinCont contain={contain} key={contain.sno} onDelete={props.onDelete} />)
            })
            }
            </h6>
        </div>
    )
}

Answer 1

props 不包含名为 constains 的属性，或者 contains 本身为 null 。

您可以做一件事。试试这个：

//Your code
{props.contains.length === 0? "No Contain To Display": props.contains.map((contain) => { return () }) } ) }

//Now instead of props.contains.length === 0 you can first check if it exists
{props.constains?"yourcode":"else do nothing"}

Answer 2

使用可选链 (?.) 进行条件渲染 props 不包含属性。

如下所示：

props?.contains?.length === 0

Reza Ghorbani

2021-12-21

Answer 3

您需要验证 contains 是否确实已设置。在您的情况下，其为 null，这会导致错误，因为 null.length 不存在

您可以这样做

props?.contains?.length // either returns the length or undefined