Javascript React中的TypeError，如何修复它以正确呈现输出？

我一直在努力学习本教程，了解如何在React中使用REST API。本教程使用引导：

我遇到了一个问题，我相信这是一个很容易解决的问题，但我对JavaScript比较陌生，通常会做出反应。我试图在Django中显示我正在使用的RESTAPI的JSON输出。我已经测试了API，它可以工作，但我确信问题出在前端

如何修复此代码以给定格式显示RESTAPI的输出

当前代码给了我一个类型错误

打字错误

App.js

在Blog组件中，您作为道具接收Blog，并且在使用时传递blogdata

有两种方法

1更新你的app.js

在Blog组件中，您作为道具接收Blog，并且在使用时传递blogdata

有两种方法

1更新你的app.js

第一个变化：道具名称不匹配

更改：

const Blog = ({ blog }) => {

致：

第二个变化：你得到的不是一个博客数组，而是一个博客，所以一旦你解决了上面的错误，你就会得到这个错误：，你可以通过

更改此项：

{blogdata.map((blg) => ( //<---- REMOVE
<div class="card">
    <div class="card-body">
    <h5 class="card-title">{blg.title}</h5>
    <h6 class="card-subtitle mb-2 text-muted">{blg.content}</h6>
    <p class="card-text">{blg.author}</p>
    </div>
</div>
))} //<--- REMOVE

致：

第一个变化：道具名称不匹配

更改：

const Blog = ({ blog }) => {

致：

第二个变化：你得到的不是一个博客数组，而是一个博客，所以一旦你解决了上面的错误，你就会得到这个错误：，你可以通过

更改此项：

{blogdata.map((blg) => ( //<---- REMOVE
<div class="card">
    <div class="card-body">
    <h5 class="card-title">{blg.title}</h5>
    <h6 class="card-subtitle mb-2 text-muted">{blg.content}</h6>
    <p class="card-text">{blg.author}</p>
    </div>
</div>
))} //<--- REMOVE

致：

---

除上述两个答案外,

确保将key属性添加到循环中的JSX项中，否则将得到另一个错误/警告

抄袭@Harish的答案

{blogdata.map((blg, key) => (
        <div class="card" key={key}>
          <div class="card-body">
            <h5 class="card-title">{blg.title}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{blg.content}</h6>
            <p class="card-text">{blg.author}</p>
          </div>
        </div>
      ))}

---

此外，除上述两个答案外，类应为className

确保将key属性添加到循环中的JSX项中，否则将得到另一个错误/警告

抄袭@Harish的答案

{blogdata.map((blg, key) => (
        <div class="card" key={key}>
          <div class="card-body">
            <h5 class="card-title">{blg.title}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{blg.content}</h6>
            <p class="card-text">{blg.author}</p>
          </div>
        </div>
      ))}

---

另外，类应该是className

在进行API调用并在then中得到响应之后，console.logdata会显示什么？在进行API调用并在then中得到响应之后，console.logdata会显示什么？谢谢。这会显示标题，但不会显示JSON中的值。我在控制台中看到这个问题。已阻止跨源请求：同一源策略不允许读取位于的远程资源http://localhost:8000/v1/blog/1/. 原因：缺少CORS标头“访问控制允许来源”。TypeError:尝试获取资源时出现NetworkError。谢谢。这会显示标题，但不会显示JSON中的值。我在控制台中看到这个问题。已阻止跨源请求：同一源策略不允许读取位于的远程资源http://localhost:8000/v1/blog/1/. 原因：缺少CORS标头“访问控制允许来源”。TypeError:尝试获取资源时出现NetworkError。非常感谢。我想你和哈里什的回答解决了我的问题。我的JSON没有显示，但我现在在控制台日志中收到以下错误：跨源请求被阻止：同源策略不允许读取远程资源http://localhost:8000/v1/blog/1/. 原因：缺少CORS标头“访问控制允许来源”。TypeError:尝试获取资源时出现NetworkError。我想这是一个单独的问题，不是吗？@RahulP，是的，它的跨源错误，你可以通过chrome扩展解决它，当你点击从一个域到另一个域的api时就会发生这种情况。谢谢。关于你提议的第二个更改，你是说我不应该使用return？不，你不是从http://localhost:8000/v1/blog/1/，这是一个JSON，所以你不能循环，明白吗？现在我明白了。谢谢非常感谢。我想你和哈里什的回答解决了我的问题。我的JSON没有显示，但我现在在控制台日志中收到以下错误：跨源请求被阻止：同源策略不允许读取远程资源http://localhost:8000/v1/blog/1/. 原因：缺少CORS标头“访问控制允许来源”。TypeError:尝试获取资源时出现NetworkError。我想这是一个单独的问题，不是吗？@RahulP，是的，它的跨源错误，你可以通过chrome扩展解决它，当你点击从一个域到另一个域的api时就会发生这种情况。谢谢。关于你提议的第二个更改，你是说我不应该使用return？不，你不是从http://localhost:8000/v1/blog/1/，这是一个JSON，所以你不能循环，明白吗？现在我明白了。谢谢

import React from 'react'

const Blog = ({ blogdata}) => {
  return (
    <div>
      <center><h1>Blog Post</h1></center>
      {blogdata.map((blg) => (
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{blg.title}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{blg.content}</h6>
            <p class="card-text">{blg.author}</p>
          </div>
        </div>
      ))}
    </div>
  )
};

export default Blog

const Blog = ({ blog }) => {

const Blog = ({ blogdata }) => {

{blogdata.map((blg) => ( //<---- REMOVE
<div class="card">
    <div class="card-body">
    <h5 class="card-title">{blg.title}</h5>
    <h6 class="card-subtitle mb-2 text-muted">{blg.content}</h6>
    <p class="card-text">{blg.author}</p>
    </div>
</div>
))} //<--- REMOVE

<div class="card">
    <div class="card-body">
    <h5 class="card-title">{blogdata.title}</h5>
    <h6 class="card-subtitle mb-2 text-muted">{blogdata.content}</h6>
    <p class="card-text">{blogdata.author}</p>
    </div>
</div>

{blogdata.map((blg, key) => (
        <div class="card" key={key}>
          <div class="card-body">
            <h5 class="card-title">{blg.title}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{blg.content}</h6>
            <p class="card-text">{blg.author}</p>
          </div>
        </div>
      ))}