我需要帮助（React Js Hooks 中的 Api 调用）为什么这不起作用？

Question

我需要帮助（React Js Hooks 中的 Api 调用）为什么这个 nort 工作？ 我需要调用该 API 中的值

import React, { useEffect, useState } from 'react';

function Customers() {
    const [customers, setCustomers] = useState(null);

    useEffect(() => {
    fetch('https://reactstarter-app.herokuapp.com/api/customers')  **API CALLS**
        .then(res => res.json())
        .then(customers => setCustomers(customers))
}, [])

return (
    <div>
        <h2>Customers</h2>
        <ul>
            {customers.map((customer) => {
                return <li key={customer.id}>{customer.firstName} {customer.lastName}</li>
            })}
        </ul>
    </div>
);
}

export default Customers;

Answer 1

也许这不是一个解决方案，但我不能粘贴代码来评论，所以我必须发布一个答案：

function Customers() {
    // this is where you declare the "customers" const
    const [customers, setCustomers] = useState(null);

    useEffect(() => {
    fetch('https://reactstarter-app.herokuapp.com/api/customers')  **API CALLS**
        .then(res => res.json())
        // this is where you should change the "customers" to "data"
        // because of the variable name conflict
        .then(data => setCustomers(data))
}, [])

Answer 2

看起来您正在尝试通过 null 状态进行映射并且可能出现错误，请使用条件渲染来避免错误并在 api 请求后渲染客户：

import React, { useEffect, useState } from 'react';

function Customers() {
    const [customers, setCustomers] = useState(null);

    useEffect(() => {
    fetch('https://reactstarter-app.herokuapp.com/api/customers')  **API CALLS**
        .then(res => res.json())
        .then(customers => setCustomers(customers))
}, [])

return (
    <div>
        <h2>Customers</h2>
        {!customers ? <h2>Loading customers...</h2> :
         <ul>
            {customers.map((customer) => {
                return <li key={customer.id}>{customer.firstName} {customer.lastName}</li>
            })}
        </ul>}
    </div>
);
}

export default Customers;