React 子组件状态未定义，但可以使用 console.log 查看状态

Question

我有一个父组件，它使用 fetch 从 API 端点获取数据。此数据应按原样显示。父组件将对象数组的元素传递给子组件。在子组件中，当我执行控制台日志时，我可以看到未定义状态和设置状态时的状态。我遇到的问题是当我尝试访问状态键（即ticket.title）时，我收到一条错误消息，指出ticket 未定义。任何帮助都会很棒。

票务清单

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import TicketDetails from "./TicketDetails"

export default function TicketList() {
    const [tickets, updateTickets] = useState([])
    const [ticketIndex, updateticketIndex] = useState("0")
    useEffect(() => {
        async function fetchTickets() {
            const response = await fetch("/api/v1/tickets")
            const json = await response.json()
            updateTickets(json.data)
        }
        fetchTickets()
    }, [])
    return (
        <Wrapper>
            < div >
                <TableTitle>
                    <h3>Tickets</h3>
                    <button type="submit">Create A Ticket</button>
                </TableTitle>
                {
                    tickets.map((ticket, index) => (
                        <ListInfo key={ticket._id} onClick={() => updateticketIndex(index)}>
                            <Left>
                                <p>{ticket.project}</p>
                                <p>{ticket.title}</p>
                                <p>{ticket.description}</p>
                            </Left>
                            <Right>
                                <p>{ticket.ticketType}</p>
                                <p>{ticket.ticketStatus}</p>
                                <p>{ticket.ticketPriority}</p>
                            </Right>
                        </ListInfo>
                    ))
                }
            </div>
            <TicketDetails key={tickets._id} data={tickets[ticketIndex]} />

        </Wrapper>
    );
}

const Wrapper = styled.div` 
display: flex;
background: white;
grid-area: ticketarea;
height: calc(100vh - 4.25rem);
`

const ListInfo = styled.div`
display: flex;
justify-content: space-between;
width: 100%;
padding: .5rem .75rem;
border-bottom: solid 1px #ccc;
`;

const Left = styled.div`
display: flex;
flex: 2;
flex-direction: column;
p {
padding: .25rem;
}
`;

const Right = styled.div`
display: flex;
flex: 1;
flex-direction: column;
align-items: end;
width: 500px;
p {
padding: .25rem;
}
`;

const TableTitle = styled.div`
display: flex;
justify-content: space-between;
padding: 1rem 1rem;
border-bottom: solid 1px #ccc;
button {
      padding: .5rem;
}
`;

票务详情

import React, { useEffect, useState } from 'react'
// import TicketInfo from './TicketInfo'
import TicketNotes from "./TicketNotes"
import styled from "styled-components"

export default function TicketDetail(data) {
  const [ticket, setTicket] = useState(data)
  useEffect(() => {
    setTicket(data)
  }, [data])
  console.log(ticket.data)

  return (
    <Main>
      <TicketInfo key={ticket._id}>
        <h2>{ticket.title}</h2>
        <Info>
          <div>
            <InfoItem>
              <p>Project</p>
              <p>{ticket.project}</p>
            </InfoItem>
            <InfoItem>
              <p>Assigned Dev</p>
              <p>{ticket.assignedDev}</p>
            </InfoItem>
            <InfoItem>
              <p>Created By</p>
              <p>{ticket.submitter}</p>
            </InfoItem>

          </div>
          <div>
            <InfoItem>
              <p>Type</p>
              <p>{ticket.ticketType}</p>
            </InfoItem>
            <InfoItem>
              <p>Status</p>
              <p>{ticket.ticketStatus}</p>
            </InfoItem>
            <InfoItem>
              <p>Priority</p>
              <p>{ticket.ticketPriority}</p>
            </InfoItem>
          </div>
        </Info>
        <Description>{ticket.description}</Description>
      </TicketInfo>
      <TicketNotes />
      <TicketComment>
        <textarea name="" id="" cols="30" rows="10" />
        <button type="submit">Submit</button>
      </TicketComment>
    </Main>
  )
}

const TicketInfo = styled.div` 
margin: .5rem;
h2{
padding: 0.5rem 0;
}
`;

const Description = styled.p` 
padding-top: .5rem;
`;

const Info = styled.div`
display: flex;
justify-content: space-between;
border-bottom: solid 1px #ddd;
`;

const InfoItem = styled.section`
margin: .5rem 0;
 p:nth-child(1) {
   text-transform: uppercase;
   color: #ABB1B6;
   font-weight: 500;
   padding-bottom: .25rem;
 }
`;


const Main = styled.div`
background: white;

`


const TicketComment = styled.div`
  display: flex;
  flex-direction: column;
  width: 40rem;
  margin: 0 auto ;

input[type=text] {
  
  height: 5rem;
  border: solid 1px black;
}

textarea {
  border: solid 1px black;
}

button {
margin-top: .5rem;
padding: .5rem;
width: 6rem;

}
`;

Answer 1

这里有几个问题，让我们按顺序解决。

票证未定义

当TicketList 被挂载时，它会获取票证。当它渲染时，它会立即渲染TicketDetail。票证获取请求不会完成，因此 tickets 未定义。这就是为什么TicketDetail 会出错。解决方案是在票可用之前阻止渲染TicketDetail。你有几个选择。

简单的方法是在数据可用之前阻止渲染：

{ !!tickets.length && <TicketDetails key={tickets._id} data={tickets[ticketIndex]} />

这使用了逻辑运算符在 JS 中的工作方式。在 JS 中，falsey && expression 返回 falsey，true && expression 返回 expression。在这种情况下，我们将ticket.length 转换为布尔值。如果它是 0（即未加载，因此为 false），我们返回 false，React 简单地将其丢弃。如果它大于 0（即已加载，因此为真），我们渲染组件。

但这并不能真正带来积极的用户体验。理想情况下，这可以通过显示某种加载微调器或类似的东西来解决：

{
  !!tickets.length 
    ? <TicketDetails . . . /> 
    : <LoadingSpinner />
}

儿童数据访问

在 TicketDetail 中，您似乎打算解构数据。当前，您正在获取整个道具对象并将其设置为ticket。解决这个问题应该可以解决问题的另一半。

范式

你没有特别要求这个，但我想备份一下，问你为什么要把这个道具变成状态？通常，这仅在执行某种临时编辑时完成，例如预填充表单以进行编辑。在您的情况下，您似乎只想呈现票证详细信息。这是一种反模式，将其放入状态只会添加更多代码，对您没有任何帮助。 React 中的约定是直接渲染 props，不需要 state。