如何通过重复单个响应组件在多个表中显示单个json文件的数据

Question

我是反应学的初学者。我想要的是，我有一个组件Datatable.js，我想通过配置一个JSON的数据在该组件中创建三个表，应该只有三个表的一个组件，但是条件是表中的值必须不同--每个表中的值必须不同--比如在第一个表中--名称、电子邮件、号码；第二个表中--电子邮件、城市号和第三个表中的值--名称、专业、数字、城市。我希望通过在Datatable.js中三次重复App.js组件来执行所有这些操作，这样三个表就可以呈现，而不是在Datatable.js中编写三次表元素。

所以请告诉我怎么做。

我已经获得了数据状态下的JSON值，并且我知道它可以通过map()方法显示，但问题是如何在每个重复组件中发送这些JSON文件值，以及Datatable.js如何获得它，以便像我前面提到的那样，在每个表中显示不同的值？

data.json

[
    {
      "person": {
        "name": "Viswas Jha",
        "avatar": "images/profile.jpg"
      },
      "city": "Mumbai",
      "email": "vishwasjha@gmail.com",
      "number": 123456,
      "profession": "UI Designer"
    },
    {
      "person": {
        "name": "Damini Pandit",
        "avatar": "images/profile.jpg"
      },
      "city": "Delhi",
      "email": "daminipandit@gmail.com",
      "number": 1345645,
      "profession": "Front-end Developer"
    },
    {
      "person": {
        "name": "Nihal Lingesh",
        "avatar": "images/profile.jpg"
      },
      "city": "Delhi",
      "email": "nihallingesh@gmail.com",
      "number": 12345689,
      "profession": "UX Designer"
    },
    {
      "person": {
        "name": "Akash Singh",
        "avatar": "images/profile.jpg"
      },
      "city": "Kolkata",
      "email": "akashsingh@gmail.com",
      "number": 1234566,
      "profession": "Backend Developer"
    }
    
  ]

App.js

import Datatable from './Datatable';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import {useState, useEffect} from 'react';
import './App.css';

const fetchData = new Promise((myResolve, myReject) => {
    let req = new XMLHttpRequest();
    req.open('GET', "./data.json");
    req.onload = function() {
    if (req.status == 200) {
      return myResolve(req.response);
    } else {
      return myReject("File not Found");
    }
  };
  req.send();
});


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

  useEffect(() => {
    fetchData.then((jsonData) => setData(JSON.parse(jsonData)));
  }, []);

  return (
    <>
      <Datatable Data = {data} />;
      <Datatable Data= {data}/>;
      <Datatable Data= {data}/>;
    </>
  );
}

export default App;

Datatable.js

import React from 'react';
import Grid from '@material-ui/core/Grid';


export default function Datatable({Data}) {

    
    return (
        <div className='main text-center '>
            <h1 className='head py-3'>Datatable</h1>
            <Grid container spacing={1} className='contain m-auto mt-5 ps-5 pb-4'>
                    <table className="table table-striped">
                        <thead>
                            <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Email</th>
                            <th scope="col">Number</th>
                            </tr>
                        </thead>
                        <tbody> 
                        {
                            Data.map((elem, ind)=>{
                            return (
                                <tr key={ind}>
                                    
                                    <td className='d-flex justify-content-between align-items-center'>
                                    <img src={elem.person.avatar} alt="avatar"/>
                                    {elem.person.name}</td>
                                    <td>{elem.email}</td>
                                    <td>{elem.number}</td>
                                  
                                </tr>
                            )
                            })
                        }
                            
                        </tbody>
                    </table>   
            </Grid>
        </div>
        );

    }

Answer 1

用这个更新您的代码。

App.js

import Datatable from './Datatable';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import {useState, useEffect} from 'react';
import './App.css';

const fetchData = new Promise((myResolve, myReject) => {
    let req = new XMLHttpRequest();
    req.open('GET', "./data.json");
    req.onload = function() {
    if (req.status == 200) {
      return myResolve(req.response);
    } else {
      return myReject("File not Found");
    }
  };
  req.send();
});


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

  useEffect(() => {
    fetchData.then((jsonData) => setData(JSON.parse(jsonData)));
  }, []);

  return (
    <>
      <Datatable data = {data} />
    </>
  );
}

export default App;

DataTable.js

import React from 'react';
import Grid from '@material-ui/core/Grid';


export default function Datatable({props}) {

    
    return (
        <div className='main text-center '>
            <h1 className='head py-3'>Datatable</h1>
            <Grid container spacing={1} className='contain m-auto mt-5 ps-5 pb-4'>
                    <table className="table table-striped ">
                        <thead>
                            <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Email</th>
                            <th scope="col">Number</th>
                            </tr>
                        </thead>
                        <tbody> 
                        {
                            props.data.map((elem, ind)=>{
                            return (
                                <tr key={ind}>
                                    
                                    <td className='d-flex justify-content-between align-items-center'>
                                    <img src={elem.person.avatar} alt="avatar"/>
                                    {elem.person.name}</td>
                                    <td>{elem.email}</td>
                                    <td>{elem.number}</td>
                                  
                                </tr>
                            )
                            })
                        }
                            
                        </tbody>
                    </table>
                    <table className="table table-striped ">
                            <thead>
                                <tr>
                                <th scope="col">Email</th>
                                <th scope="col">City</th>
                                <th scope="col">Number</th>
                                </tr>
                            </thead>
                            <tbody> 
                            {
                                props.data.map((elem, ind)=>{
                                return (
                                    <tr key={ind}>
                                        <td>{elem.email}</td>
                                        <td>{elem.city}</td>
                                        <td>{elem.number}</td>
                                    </tr>
                                )
                                })
                            }
                                
                            </tbody>
                        </table>
                        <table className="table table-striped ">
                                <thead>
                                    <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">Profession</th>
                                    <th scope="col">Number</th>
                                    <th scope="col">City</th>
                                    </tr>
                                </thead>
                                <tbody> 
                                {
                                    props.data.map((elem, ind)=>{
                                    return (
                                        <tr key={ind}>
                                            <td>{elem.person.name}</td>
                                            <td>{elem.profession}</td>
                                            <td>{elem.number}</td>
                                            <td>{elem.city}</td>
                                          
                                        </tr>
                                    )
                                    })
                                }
                                    
                                </tbody>
                            </table>
            </Grid>
        </div>
        );

    }