json 需要帮助从React而不是数组中的对象获取API数据

jmo0nnb3  于 2022-11-19  发布在  React
关注(0)|答案(2)|浏览(152)

早上好,我在我的应用程序中获取API时遇到了问题,我试图获取JSON对象信息,但我一直得到this.state.data.map不是函数错误,我知道Map应该是数组而不是字符串,但我似乎无法修复代码,因此它会拉入对象而不是字符串信息。我从JSON文件中拉入的API信息如下:

{
   "slider":
         {
           "title": "Slider Title",
           "content": "Slider content",
           "image": "Slider.jpg",
           "displaySlideShow": true,
           "displayLearnMoreLink": true
          }
   "content":
         {
           "title": "Content Title",
           "content": "Content Info",
          }
}

这是我在react中编写的代码

class AdminEmailSignups extends Component {
constructor()
    {
     super();
     this.state={ data:[], }
     }

componentDidMount()
     {
          fetch('api/contact').
          then((Response)=>Response.json()).
          then((findresponse)=>
           {
             this.setState({ data:findresponse, })
            })
      }
   render() 
   {
   return (
       <div className="app flex-row adminsections ">
         <Table striped bordered condensed hover responsive>
         {
         this.state.data.map(function(blog){
         return <tbody>
         <tr>
         <td><span>{blog.slider.title}</span></td>
         </tr>
         </tbody>
         })
         }
        </Table>
        </div>
         );
         }
          }

我想知道是否有人可以审查我的代码,并指出我在正确的方向,以帮助我解决这个问题再次感谢

zujrkrfu

zujrkrfu1#

因为map只对数组有效,所以可以创建一个条件foreach循环来处理这个问题。
或者更快的方法是...
Object.keys(this.state.data).map(blog => {.... })

vwhgwdsa

vwhgwdsa2#

对此进行更新。
假设您在JSON文件中有这个(只包含1个密钥)

// sample_data.json
[
    {
        "id": "1",
        "posted_by": "posted name",
        "content": "sample content",
        "slug": "adklj-adf32f",
        "title": "title this"
    }
]

您可以使用useEFfect来提取数据。

import blogs from '../Model/sample_data.json';

const [getContent, setContent] = useState('');

useEffect(() => {
setContent(blogs[0]) 
}, []);

注意字典中的数组[0],然后你就可以用它来显示实际的数据了。

<div className="display-post__title">
    <h1>{getContent['title']}</h1>
    <span>Posted by: {getContent['posted_by']}</span>
</div>

祝你好运!

相关问题