在我的后端(仅用于提供信息的nodejs)中,数据返回正常
但我必须填充响应中返回的数据
显示用户的名称,而不是其ID
响应以以下形式返回
当我尝试访问react应用程序中的用户名(在本例中为realName)时,出现了问题,如本问题的标题所示
我附上所有的信息,如果任何人需要更多的信息,不要犹豫,要求它
"这个钩子"
import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { getOneTicket } from "../../store/actions";
const TicketsDetailsHook = (id) => {
const dispatch = useDispatch();
//to get state from redux
const { ticketsDetiles, isTicketCreated, error } = useSelector((state) => ({
ticketsDetiles: state.Tickets.ticketsDetiles,
isTicketCreated: state.Tickets.isTicketCreated,
error: state.Tickets.error,
}));
let item = [];
if(isTicketCreated===true){
if (ticketsDetiles){
item = ticketsDetiles;
console.log(ticketsDetiles);
}
}
//else{item = [];}
//when first load
useEffect(() => {
dispatch(getOneTicket(id))
}, [])
return [item];
};
export default TicketsDetailsHook;
此组件
import React from "react";
import { useParams } from "react-router-dom";
import { Col, Row } from "reactstrap";
import TicketsDetailsHook from "../../../Hooks/TicketsHooks/TicketsDetailsHook";
const Section = () => {
const { id } = useParams();
const [item] = TicketsDetailsHook(id);
return (
<React.Fragment>
<Col lg={12}>
<div className="bg-soft-warning">
<Row>
<div className="col-md">
<h4 className="fw-semibold" id="ticket-title">
erere
</h4>
<div className="hstack gap-3 flex-wrap">
<div className="text-muted">
<i className="ri-building-line align-bottom me-1"></i>{" "}
<span id="ticket-client">{item.addedBy.realName}</span>
</div>
</div>
</div>
</Row>
</div>
</Col>
</React.Fragment>
);
};
export default Section;
该行不被接受,问题就出在这里
{项目添加者.实名}
注:
如果我取消填充过程,当然一切都正常,除了我将获得激光器的ID,而不是它的名称
此控制台日志(项目)
此conslo.log组件文件
仅当我尝试登录时出现错误
项目.添加者.realName
这是控制台中的错误日志
错误:对象作为React子对象无效(找到:如果您想要呈现子对象的集合,请改用数组。
正如您所看到的,除了
{项目数据?.添加了真实名称}
返回空x1c4d 1x
2条答案
按热度按时间3htmauhk1#
在
Section
组件中,应为:item.data?.addedBy.realName
.?
用于项目为空数组的情况,当isTicketCreated
为false时会发生这种情况。是的,您确实将
item
作为一个数组从钩子中发送,但是当您在Section
中使用钩子时,您将它从该数组中提取出来,如下所示:const [item] = TicketsDetailsHook(id);
因此它仍然是一个对象,您只需要访问其中的
data
字段。**注意:**如果您从挂接导入项目,如下所示:
然后,它将是一个数组,因为你没有重构它。所以在这种情况下,你将像这样访问数据:
item[0].data?.addedBy.realName
lhcgjxsq2#
你只应该从钩子上取下
并尝试在组件中执行
console.log(item)
。