¿Cómo puedo mapear sobre 2 matrices de objetos en React y renderizar en una tabla? ¿Cuáles son las opciones para este problema? ¿Debo fusionar estos dos arreglos en uno? Verifique los datos de Json
let URL1 = "http://api_url/users" let URL2 = "http://api_url/users-card" const promise1 = axios.post(URL1, inputValue , {headers: {'Content-Type': 'text/plain'}}); const promise2 = axios.post(URL2, inputValue , {headers: {'Content-Type': 'text/plain'}}); Promise.all([promise1, promise2]).then(function(values) { setDataSetOne(values[0]); setDataSetTwo(values[1]); }); <TableContainer> <Table> <TableHead> <TableRow> <TableCell>Dessert (100g serving)</TableCell> <TableCell align="right">Calories</TableCell> <TableCell align="right">Fat (g)</TableCell> </TableRow> </TableHead> <TableBody> <TableCell>DataOne</TableCell> <TableCell>DataOne</TableCell> <TableCell>DataTwo</TableCell> </TableBody> </Table> </TableContainer>Datos Json 1.º
[{ "name": "adnan hassan", "count": 6960 }, { "name": "adnan", "count": 69666660 }]2.º datos Json
[{ "keyword_idea_metrics": { "competition": "LOW", "avg_monthly_searches": "6600", "competition_index": "22", "low_top_of_page_bid_micros": "53135896", "high_top_of_page_bid_micros": "278963954" }, "keyword_annotations": { "concepts": [] }, "text": "dubai homes", "_text": "text" }]Editar: se han agregado datos Json
Puede usar un objeto para contener dos estados como este:
import { useEffect, useState } from 'react'; import axios from 'axios'; const App = () => { // use one object to contain two states const [data, setData] = useState({ dataOne: '', dataTow: '' }); // fetch data useEffect(() => { const fetchData = async () => { const dataOne = await axios.post(URL1, inputValue, { headers: { 'Content-Type': 'text/plain' }, }); const dataTow = await axios.post(URL2, inputValue, { headers: { 'Content-Type': 'text/plain' }, }); setData({ dataOne, dataTow }); }; fetchData(); }, []); // display data return ( <TableContainer> <Table> <TableHead> <TableRow> <TableCell>Dessert (100g serving)</TableCell> <TableCell align="right">Calories</TableCell> <TableCell align="right">Fat (g)</TableCell> </TableRow> </TableHead> <TableBody> <TableCell>{data.dataOne}</TableCell> <TableCell>{data.dataTow}</TableCell> </TableBody> </Table> </TableContainer> ); }; export default App;Espero que sea útil.