问题

Question

React pass 使用 useNavigate 无法读取 null 的属性

2022-06-21

1928

reactjs react-hooks react-router react-router-dom

我正在使用 useNavigate 在组件之间传递数据。

import { useNavigate } from "react-router-dom";

function Categories() {
const navigate = useNavigate();
.
.
onClick={() => navigate("/books", {state:{ name: categorie.name }})}

然后我从第二个组件中获取数据

import {useLocation} from "react-router-dom";
function Books() {
const location = useLocation();
let currentcategory = location.state.name;

它工作正常，但如果我尝试直接使用 URL https://localhost/books 访问

我收到此错误

Uncaught TypeError: Cannot read properties of null (reading 'name')

Answer 1

问题

问题是，仅当您从提供状态的组件转换时，路由/链接/导航状态才会存在。如果您在地址栏中手动输入接收路由的 URL 路径，则此状态会丢失或为未定义/空。

换句话说， location.state 未定义/空，并且在进一步访问它以获取 location.state.name 时会抛出错误。

解决方案

使用 null-check/guard-clause 或可选链运算符来防御潜在的 null 访问，或提供后备值以从中解构。

Null-check/guard-clause

const { state } = useLocation();
const currentCategory = state && state.name;

可选链式运算符

const { state } = useLocation();
const currentCategory = state?.name;

要解构的后备对象

const { state } = useLocation();
const { name: currentCategory } = state || {};

Answer 2

您需要对其进行解构

const {state} = useLocation();
console.log(state)

Aman Sadhwani

2022-06-21