在函数中访问由 React Hook 设置的数据答案

【问题标题】：Accessing data set by React Hook in a function在函数中访问由 React Hook 设置的数据
【发布时间】：2021-08-09 06:11:47
【问题描述】：

我对 React 有点陌生。我正在尝试从应返回以下 JSON 的 REST API 端点发出 GET 请求：

{
    "author": "aqho",
    "title": "Second post!",
    "slug": "second-post",
    "body": "Let's see if things get updated in the database like the slug",
    "comments_list": [
        {
            "author": "aqho",
            "body": "it works!",
            "slug": "7213569934952552711-3"
        },
        {
            "author": "bobglu",
            "body": "how are you just so classically handsome",
            "slug": "2029512273124111200-4"
        }
    ]
}

要查询 API，我使用以下代码：

const PostDetailPage = (props) => {
    const [post, setPost] = useState({});

    useEffect(() => {
        const slug = props.match.params.slug;
        const fetchData = async () => {
            try {
                const res = await API.get(`posts/${slug}`);
                setPost(res.data);
            }
            catch (err) {
                console.log(err)
            }
        };
        
        fetchData();
    }, []);
...
}

我想创建一个从 JSON 返回 cmets 列表的函数。我最初的尝试如下：

const renderComments = () => {
        return post.comments_list.map(item => (
          <li 
            key={item.slug}
          >
            {item.body}
          </li>
        ));
      };

但是，它给了我错误TypeError: Cannot read property 'map' of undefined。网上看了一下，好像大部分人的问题都可以通过将默认值设置为空字典来解决，但是我已经在我的 React hook 中做到了。我对为什么 posts.cmets_list 未定义感到非常困惑。我还注意到，尝试使用 console.log(post.title) 记录帖子的标题也会给我undefined。我有点困惑为什么会这样，因为下面的代码能够很好地从post 中提取值：

const PostDetailPage = (props) => {
...
    return (
            <div id='post-details-page'>
                <div id='post-details'>
                    <h1>{post.title}</h1>
                    <h4>Published on: {post.published_on}</h4>
                    <h4>Last edited: {post.last_edited}</h4>
                    <p> {post.body} </p>
                </div>
            </div>
        );
};

export default PostDetailPage;

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

const renderComments = () => {
        return post.comments_list?.map(item => (
          <li 
            key={item.slug}
          >
            {item.body}
          </li>
        ));
      };

在第一次渲染时，post = {}，post.cmets_list 未定义。

【讨论】：

【解决方案2】：

您只需要添加检查 post 和 post.comments_list 对象，因为最初它是空的

const renderComments = () => {
        return post && post.comments_list &&post.comments_list.map(item => (
          <li 
            key={item.slug}
          >
            {item.body}
          </li>
        ));
      };

【讨论】：