时间戳

首页 > 解决方案 > 按钮未呈现

reactjs - 按钮未呈现

问题描述

我正在尝试通过读取存储在本地目录中的 json 文件的内容来为每个标题创建一个新的动态按钮。

JSON文件

[
    {
        "page" : "Page1" ,
        "imptopics":[
            {
                "title" : "Btn1",
                "url" : "https:link/"
            },
            {
                "title" : "Btn2",
                "url" : "http:link/"
            },
            {
                "title" : "Btn3",
                "url" :"http:link"
            },
            {
                "title" : "Btn4",
                "url" : "http:link"
            }
        ]
    }
]

这是我的反应组件，我正在使用 fetch 来读取 json 文件的内容，

import React from 'react'
import { useState , useEffect } from 'react'
import { Button } from 'antd'


function ImportantTopics() {
    const [data,setData] = useState([]);

    const getData = () =>{
        fetch('popularlinksdata.json'
        ,{
            headers :{
            'Content-Type': 'application/json',
            'Accept' : 'application/json'
            }
        }
        )
          .then(function(response){
              return response.json();
          })
          .then(function(myJson){
              console.log(myJson)
              setData(myJson)
          });
    }
    
    useEffect(() => {
        getData()
    }, [])

    return (
        <div className="grid grid-cols-2 gap-6">
            {
                data && data.length > 0 && data.map((topic) => {
                    topic.imptopics.forEach(element => {
                        console.log(element.title);
                        <Button  className="sprtLinksButton">{element.title}</Button>      
                    })
                }) 
            }
        </div>
    )
}

export default ImportantTopics;

但是按钮没有被渲染，它正在控制台中显示。我能错过什么？

标签： reactjs

解决方案

JSON内容实际上是一个数组，我们不知道有多少元素。如果要渲染所有imtopics出现在 JSON 内容中的内容，可以将它们合并imtopics为一个。

import React from 'react';
import { useState, useEffect } from 'react';
import { Button } from 'antd';


function ImportantTopics() {
  const [data,setData] = useState([]);
  const getData = () => {
    fetch('popularlinksdata.json', {
      headers :{
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    })
    .then(response => response.json())
    .then(function(myJson) {
      const imptopics = myJson.reduce((merged, item) => [...merged, ...item.imptopics], []);
      // we will have all the imtopics merged into `imptopics`
      setData(imptopics);
    });
  };

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

  return (
    <div className="grid grid-cols-2 gap-6">
      {
        data && data.length > 0 && data.map((topic, index) => (<Button key={index} className="sprtLinksButton">{topic.title}</Button>))
      }
    </div>
  );
}

export default ImportantTopics;

推荐阅读