Javascript React Hooks:TypeError:无法读取属性'；名字'；空的

我试图在React hooks中提取值，但与此同时，当我控制台

customer

时，我得到了这个错误

TypeError:无法读取null的属性“firstName”

我不知道我的代码中有什么问题。我是新来的，有人能帮我解决这个问题吗

谢谢

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

当我安慰客户时。firstName

 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();
  }, []);

这给了我错误

代码

 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)}

---

错误是有道理的，您使用的是

对象表示法

来获取属于非对象的值

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

 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>
  )
}

const Customer=（）=>{
const[customer，setCustomer]=useState（null）；
异步函数fetchMyAPI（）{
let response=等待获取(
`/api/requirements/find？customerId=${item.customerId}`
);
让data=wait response.json（）；
控制台日志（数据）；
设置客户（数据）；
}
useffect（异步（）=>{
fetchMyAPI（）；
}, []);
返回(
{customer.firstName}
{customer.lastName}
)
}

错误是有意义的，您正在使用

对象表示法

来获取属于非对象的值

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

 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>
  )
}

const Customer=（）=>{
const[customer，setCustomer]=useState（null）；
异步函数fetchMyAPI（）{
let response=等待获取(
`/api/requirements/find？customerId=${item.customerId}`
);
让data=wait response.json（）；
控制台日志（数据）；
设置客户（数据）；
}
useffect（异步（）=>{
fetchMyAPI（）；
}, []);
返回(
{customer.firstName}
{customer.lastName}
)
}

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

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

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

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

---

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

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

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

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

---

错误消失了，但当我控制

cusotmer

的值时，它给出了未定义的值value@jonny什么是控制台日志（响应）；在fetch API函数中返回？从您的OP中，听起来您正在调用console.log（）作为回报？我需要提取客户的价值，如

firstName

和

lastName

我为其附上了一张图片，请检查一下it@jonny明白了！我已经更新了上面的代码，请告诉我这是否适用于您，错误已经消失，但当我控制台

cusotmer

的值时，它会给我未定义的值value@jonny什么是控制台日志（响应）；在fetch API函数中返回？从您的OP中，听起来您正在调用console.log（）作为回报？我需要提取客户的价值，如

firstName

和

lastName

我为其附上了一张图片，请检查一下it@jonny明白了！我已经更新了上面的代码，如果对你有效，请告诉我，