Question

未捕获的类型错误：无法读取未定义的属性，但我可以在控制台中看到它

2022-11-03

73

reactjs json ruby-on-rails rest axios

function RequestDetail({match}) {
  const [request, setRequests] = useState({});
  const [data, setData]= useState([]);

  useEffect(() => {
    fetchRequest();
}, []);
const fetchRequest = () => {
  axios
    .get(
      `${baseUrl}/${match.params.id}`
    )
    .then((res) => {
      setRequests(res.data);
      console.log(res.data);
    })
    .catch((err) => console.log(err));
};

<Card key={request.id}>
                            <Card.Header>{request.user.email}</Card.Header>
                            <Card.Body>
                            <Card.Title>{request.address}</Card.Title>
                            <Card.Text>
                               {request.description}<br/>
                               {request.kind}
                            </Card.Text>
                            </Card.Body>
                    </Card>

`

在控制台中我有这个

有什么建议吗？

我只想映射 json 中包含的用户，我试过 .map() 但通过 .map() 不是一个函数

Answer 1

尽管您在状态下将 reuest 初始化为空对象，但在您获取数据之前，您的 request.user 是未定义的，因此它无法读取 email 属性。

可以采取一些解决方法

<Card.Header>{request.user?.email}</Card.Header>
const [request, setRequests] = useState({ user: {} });

Answer 2

由于对象最初为空，并且您在 request = {} 时尝试访问 request.user.email，因此显示错误。

您可以尝试可选链接 - 将 request.user.email 替换为 request?.user?.email

另一个选项是使用未定义初始化请求，以便您可以使用条件渲染。

const [request, setRequest] = useState();
// do this when rendering
{request && 
  <Card key={request.id}>
    <Card.Header>{request.user.email}</Card.Header>
    <Card.Body>
      <Card.Title>{request.address}</Card.Title>
      <Card.Text>
        {request.description}<br/>
        {request.kind}
      </Card.Text>
    </Card.Body>
  </Card>
}