具有地图功能的元素的ReactJS条件显示返回我的对象​​或键为'undefined'

如何解决具有地图功能的元素的ReactJS条件显示返回我的对象​​或键为'undefined'

在这里，我已将状态从一个组件传递到另一个组件，方法与之前相同。当我console.log通过状态（在JSX中添加map语句之前）时，我得到的对象是即时消息。但是当我进入return语句时，我得到“无法映射'undefined'”。然后，console.log开始返回未定义状态。但是在我尝试映射通过的prop之前，console.log正在返回数据。有人可以帮我看看我在做什么错吗？

function Items ({orgList}) {


console.log(orgList.items)

return (
    <>

  {orgList ? 
    <div>
    {orgList.items.map((item,i) => (
        
        <Card key={i} className= "w-100 m-2">
        <CardHeader className="d-flex">
            <p>Hello</p>
        </CardHeader>
        <CardBody>
            <p>The Body</p>
            <Row>
                <Col md="5">
                    <dl>
                        <dt>GroupID</dt>
                        <dd>{item.GroupID}</dd>
                        <dt>Name</dt>
                        <dd>{item.name}</dd>
                    </dl>
                </Col>
            </Row> 
        </CardBody>
    </Card>
        ))}
    </div>
    :
    <div>
    <PageLoadSpinner inProgress={inProgress} />
    </div>
    } 
 </>
)
}
export default Items;**strong text**

这是父组件

function Orgs () {

const [orgList,setorgList] = useState([]);

useEffect(() => {
    loadOrgs();
},[]);

const loadOrgs = () => {
    api.MonitoringOrg.list()
    .then(response => {
        console.log(response)
        setorgList(...orgList,response)
    })
    .catch(err => console.log(err))
}

return(
   
    <>
     <Items orgList={orgList}/>        
    </>


)

}

export default Orgs;

解决方法

包含undefined的错误（例如您正在观察的错误）可能是以下两种情况之一：

（1）变量未定义或函数无法访问。在您的情况下情况并非如此，因为您已经表明可以在条件范围之外访问变量。或者，

（2）渲染函数在进行渲染时尚未评估您的变量。在您的情况下可能就是这种情况。

我认为第二种情况是由于竞争状况造成的，我将其细节留给对React源代码有更深入了解的人来解释。

避免这种情况的一种简便方法是使用所需的特定键更新条件。这将有助于防止渲染功能使组件短路。这样，如果不进行渲染就不会调用您的数据。

鉴于您要在地图功能中使用orgList.items的情况，让我们根据以下内容更新代码：

function Items ({orgList}) {


console.log(orgList.items)

return (
    <>

  {orgList?.items?             {/* <------ update this line as seen here */}
    <div>
    {orgList.items.map((item,i) => (
        
        <Card key={i} className= "w-100 m-2">
        <CardHeader className="d-flex">
            <p>Hello</p>
        </CardHeader>
        <CardBody>
            <p>The Body</p>
            <Row>
                <Col md="5">
                    <dl>
                        <dt>GroupID</dt>
                        <dd>{item.GroupID}</dd>
                        <dt>Name</dt>
                        <dd>{item.name}</dd>
                    </dl>
                </Col>
            </Row> 
        </CardBody>
    </Card>
        ))}
    </div>
    :
    <div>
    <PageLoadSpinner inProgress={inProgress} />
    </div>
    } 
 </>
)
}
export default Items;