reactjs React错误:对象作为React子级无效

b1uwtaje  于 2022-11-29  发布在  React
关注(0)|答案(2)|浏览(155)

在我的后端(仅用于提供信息的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

3htmauhk

3htmauhk1#

Section组件中,应为:item.data?.addedBy.realName .

?用于项目为空数组的情况,当isTicketCreatedfalse时会发生这种情况。
是的,您确实将item作为一个数组从钩子中发送,但是当您在Section中使用钩子时,您将它从该数组中提取出来,如下所示:const [item] = TicketsDetailsHook(id);
因此它仍然是一个对象,您只需要访问其中的data字段。

**注意:**如果您从挂接导入项目,如下所示:

const item = TicketsDetailsHook(id);

然后,它将是一个数组,因为你没有重构它。所以在这种情况下,你将像这样访问数据:item[0].data?.addedBy.realName

lhcgjxsq

lhcgjxsq2#

你只应该从钩子上取下
并尝试在组件中执行console.log(item)

相关问题