Как продумать логику вывода HTML кода на экран с функции Reactjs

Question

Здраствуйте, я новичок в JS и React, я хочу выводить все данные в Sidebar полученные с firebase в таком виде:

Код PatientSidebar:

import React from 'react';
import { useHistory } from 'react-router-dom';
import axios from "axios";
import {url} from "../../services/PatientService";

const PatientSidebar = () => {
const history = useHistory();

function showPatients(patients) {
    patients.then((response) => {
        const patients = response.data;
        for (let patientID in patients) {
 // Тут я стараюсь вывести данные что бы они отображались в sidebar-е
            return(
                <li>
                    <div className='patient'>
                        {patients[patientID].firstname}{' '}{patients[patientID].lastname}
                    </div>
                    <div className='age'>
                        {patients[patientID].birth}
                    </div>
                </li>
            )
        }
    })
        .catch((error) => {
            console.error(error);
        })
        .then(() => {
            // always executed
        });
}

function getPromisePatients(url) {
    return axios.get(url);
}


return (
    <div className='sidebar'>
        <div className='search'>
            <input type="text" placeholder='Search' className='search-form' />
            <a href="/patient/new"><button className='new-btn'>New patient</button></a>
        </div>

        <div className='list'>
            <ul>
                {
                    showPatients(getPromisePatients(`${url}/patientLoad.json`))
                }
            </ul>
        </div>
    </div>
);
}

export default PatientSidebar;

Данные firebase:

Данные которые вывожу в консоль:

Если нужна дополнительная информация пишите, буду благодарен любой помощи

Answer 1

Думаю вы хотите как то так:

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import axios from "axios";
import {url} from "../../services/PatientService";

const PatientSidebar = () => {

const [patients, setPatients] = useState()
const history = useHistory();

useEffect(() => {
    patients.then((result) => setPatients(result)) // при рендере компонента делаем запрос на сервер, получаем данные и пишем их в стейт
}, [])


return patients && (
    <div className='sidebar'>
        <div className='search'>
            <input type="text" placeholder='Search' className='search-form' />
            <a href="/patient/new"><button className='new-btn'>New patient</button></a>
        </div>

        <div className='list'>
            <ul>
                {patients.map((patient) => { // рендерим массив пациентов
                    return (
                    <li>
                        <div className='patient'>
                            {patient.firstname}{' '}{patient.lastname}
                        </div>
                        <div className='age'>
                            {patient.birth}
                        </div>
                    </li>
                    )
                })
                }
            </ul>
        </div>
    </div>
);
}

export default PatientSidebar;

Answer 2

Можно сделать примерно так (только подставить нужный URL для запроса, для теста можно посмотреть как это работает с тестовыми данными ):

import React, { useEffect, useState } from "react";
import axios from "axios";

const fakeData = [
  { id: 1, age: 19, firstname: "Abc", lastname: "Abc" },
  { id: 2, age: 20, firstname: "Def", lastname: "Def" },
  { id: 3, age: 21, firstname: "Ghi", lastname: "Ghi" },
];

const PatientSidebar = () => {
  const [patients, setPatients] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      // const url = "your url here";
      // const data = await axios.get(url);
      // setPatients(data);
      setPatients(fakeData);
    };
    void fetchData();
  }, []);

  return (
    <div className="sidebar">
      <div className="search">
        <input type="text" placeholder="Search" className="search-form" />
        <a href="/patient/new">
          <button className="new-btn">New patient</button>
        </a>
      </div>

      <div className="list">
        {patients.length &&
          patients.map(({ id, age, firstname, lastname }) => (
            <div key={id}>
              <div className="patient">
                firstname: {firstname} lastname: {lastname}
              </div>
              <div className="age">age: {age}</div>
            </div>
          ))}
      </div>
    </div>
  );
};

export default PatientSidebar;

Answer 3

import React, { useContext, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import {PatientContext} from "../app/App";
import { url } from "../../services/PatientService";
const axios = require('axios');

const PatientSidebar = () => {
const { sidebarPatients, setSidebarPatients } = useContext(PatientContext);
const history = useHistory();


async function getArrayOfPatients(patientsPromise) {
    let arr = [];
    await patientsPromise.then((response) => {
        const patients = response.data;
        for (let patientID in patients) {
            arr.push({
                id: patientID,
                firstname: patients[patientID].firstname,
                lastname: patients[patientID].lastname,
                birth: patients[patientID].birth
            });
        }
    })
    return arr;
}

function getPromisePatients(url) {
    return axios.get(url);
}

useEffect(() => {
    getArrayOfPatients(getPromisePatients(`${url}/patientLoad.json`))
        .then((result) => {
            setSidebarPatients(result)
        })

}, [])

return sidebarPatients && (
    <div className='sidebar'>
        <div className='search'>
            <input type="text" placeholder='Search' className='search-form' />
            <a href="/patient/new"><button className='new-btn'>New patient</button></a>
        </div>

        <div className='list'>
            <ul>
                {sidebarPatients.map((patient) => {
                    return (
                        <li>
                            <div className='patient'>
                                {patient.firstname}{' '}{patient.lastname}
                            </div>
                            <div className='age'>
                                {patient.birth}
                            </div>
                        </li>
                    )
                })}
            </ul>
        </div>
    </div>
);
};

export default PatientSidebar;

Решил проблему таким образом, сейчас появилась проблема что нужно обновлять страничку что бы увидеть новых пациентов

БЛОГ НА HUSL

Как продумать логику вывода HTML кода на экран с функции Reactjs

Ответы (3 шт):