反应钩子：类型错误：无法读取空的属性"firstName"

Question

我正在尝试在 React 钩子中提取值，但与此同时，当我控制台customer时，我收到了此错误TypeError: Cannot read property 'firstName' of null我不知道我的代码中有什么问题。我是 React Hook 的新手，有人可以帮我解决这个问题吗？

谢谢

当我安慰客户时，我得到这个结果

结果视图

当我控制台客户时。名字

它给了我错误

法典

const [customer, setCustomer] = useState(null);
async function fetchMyAPI() {
let response = await fetch(
`/api/requirements/find?customerId=${item.customerId}`
);
response = await response.json();
console.log(response);
setCustomer(response);
}
useEffect(async () => {
fetchMyAPI();
}, []);

返回功能

{console.log(customer.firstName)}

Answer 1

该错误是有道理的，您正在使用Object notation来达到属于非对象的值。

只需将初始状态设置为空对象即可解决控制台错误：

const [customer, setCustomer] = useState({});

总体代码：

const Customer = () => {
const [customer, setCustomer] = useState(null);
async function fetchMyAPI() {
let response = await fetch(
`/api/requirements/find?customerId=${item.customerId}`
);
let data = await response.json();
console.log(data);
setCustomer(data);
}
useEffect(async () => {
fetchMyAPI();
}, []);
return(
<div>
<h4>{customer.firstName}</h4>
<h4>{customer.lastName}</h4>   
</div>
)
}

Answer 2

您可以将初始状态设置为空白对象，如下所示...

const [customer, setCustomer] = useState({});

或
您可以设置对象的默认结构，如下所示...

const [customer, setCustomer] = useState({firstName: '', lastName: ''});