我需要帮助（React JS Hook中的API调用）为什么此北部有效？

Question

我需要帮助（React JS Hook中的API调用）为什么此北部有效？ 我需要从该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

看来您正在尝试通过零状态映射并可能遇到错误，使用条件渲染以避免错误并在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;