为什么 useState() 没有设置默认值？答案

【问题标题】：Why is useState() not setting the default value?为什么 useState() 没有设置默认值？
【发布时间】：2020-11-20 17:08:59
【问题描述】：

我创建了以下 reactComponent。据我了解 useState([]);应将 cmets 变量设置为数组。但事实并非如此。我得到一个例外，我尝试在一个对象上运行 .map()。我要做的是 Object.values(cmets) 让它工作，但我不明白为什么。我的 api 肯定会返回一个评论对象数组。

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

export default ({ postId }) => {
  const [comments, setComments] = useState([]);

  const fetchData = async () => {
    const res = await axios.get(
      `http://localhost:4001/posts/${postId}/comments`
    );

    setComments(res.data);
  };

  useEffect(() => {
    fetchData();
  }, []);

  const renderedComments = comments.map(comment => {
    return <li key={comment.id}>{comment.content}</li>;
  });

  return <ul>{renderedComments}</ul>;
};

【问题讨论】：

推测（缺少minimal reproducible example）：默认值为空数组，但随后您调用setComments(res.data)并将其设置为对象。
console.log(res.data) 的输出是什么？你确定它是一个数组吗？
你们都完全正确。我的后端有一个语法错误，当没有 cmets 时，端点什么也不返回，而是在一个空数组上返回。在我修复代码工作后。
你应该总是在渲染之前检查你是否有数据，这样你就可以在没有数据的情况下处理要显示的内容。
控制台日志是你的朋友。如果您的值不是您所期望的，那么首先要做的是找到您设置该值的每个位置，并仔细检查您设置的值。假设您的 API 按预期工作是不够的。证明给自己看。

标签： javascript reactjs

【解决方案1】：

据我所知，您对状态的使用是正确的，Object.values 处理返回给您的数据这一事实意味着它绝对是一个对象或一个数组，您是否运行 Array.isArray(res.data) 作为您的故障排除过程？

正如上面一位评论者所说，最有可能的情况是您从后端取回了一个对象。您可以做的其他事情来确认它是否有错误地传回给您的数据是简单地注释掉您的 useEffect 并查看它是否仍然抛出相同的异常。

【讨论】：