数据来了，但没有在反应中显示

Question

我正在从后端获取一些数据，并且在获取数据时没有任何错误，但问题是在获取数据之前，HTML 部分正在加载，这就是数据未显示在页面上的原因。 这可能是一个简单的问题，但作为一个初学者，我不知道如何解决。

import React from "react";
import styled from "styled-components";
import HospitalCard from "../components/HospitalCard";
import SearchBar from "../components/SearchBar";
import { useState } from "react";
import { useEffect } from "react";
import axios from "axios";

const Container = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 2vh 5vw;
  margin: auto;
`;

function Home() {
  const nothing = <div>Nothing to show</div>;

  const [data, setData] = useState([]);

  const [Hospitals, setHospitals] = useState([]);

  const [filtered, setFiltered] = useState(false);

  const [searchItem, setSearchItem] = useState("");

  const getSearchValue = (e) => {
    setSearchItem(e);
  };

  useEffect(() => {
    let isMount = true;
    axios.get("http://localhost:4000/search").then((response) => {
      if (isMount) {
        const hdata = response.data;
        setHospitals(hdata);
        console.log(hdata);
        console.log(Hospitals);
      }
    });
    return () => {
      isMount = false;
    };
  }, []);

  useEffect(() => {
    setFiltered(true);
    var filteredHospitals = Hospitals.filter(function (el) {
      console.log(el.city);
      return (
        el.city.toLowerCase().includes(searchItem.toLowerCase().trim()) ||
        el.hospitalname
          .toLowerCase()
          .trim()
          .includes(searchItem.toLowerCase().trim()) ||
        el.state.toLowerCase().includes(searchItem.toLowerCase().trim())
      );
    });
    setData(filteredHospitals);
  }, [searchItem]);

  console.log(Hospitals);
  return (
    <div>
      <SearchBar style={{ margin: "auto" }} getSearchValue={getSearchValue} />
      <Container>
        {filtered
          ? data
            ? data.map((hospital) => {
                return (
                  <HospitalCard
                    key={hospital.mobilenumber}
                    hospital={hospital}
                  />
                );
              })
            : nothing
          : Hospitals.map((hospital) => {
              return (
                <HospitalCard key={hospital.mobilenumber} hospital={hospital} />
              );
            })}
      </Container>
    </div>
  );
}

export default Home;

Answer 1

我认为您应该通过删除filtered 标志并使用数组来存储要在两种情况下显示的数据来简化处理过滤的方式。

1. 创建filteredHospitals 状态以包含要显示的数据
2. 过滤时更新该值的数据
3. 使用条件渲染来显示数据（如果存在）

最后，我认为您应该将getSearchValue 代码更改为setSearchItem(e.target.value)（您使用的是setSearchItem(e)）。
SearchBar 组件的代码不包括在内，但我猜e 参数指的是 on change 事件对象。

function Home() {
  const [Hospitals, setHospitals] = useState([]);
  const [filteredHospitals, setFilteredHospitals] = useState([]);

  const [searchItem, setSearchItem] = useState('');

  const getSearchValue = (e) => {
    setSearchItem(e.target.value);
  };

  useEffect(() => {
    let isMount = true;
    axios.get('http://localhost:4000/search').then((response) => {
      if (isMount) {
        const hdata = response.data;
        setHospitals(hdata);
        setFilteredHospitals(hdata);
      }
    });
    return () => {
      isMount = false;
    };
  }, []);

  useEffect(() => {
    var filteredHospitals = Hospitals.filter(function (el) {
      console.log(el.city);
      return (
        el.city.toLowerCase().includes(searchItem.toLowerCase().trim()) ||
        el.hospitalname
          .toLowerCase()
          .trim()
          .includes(searchItem.toLowerCase().trim()) ||
        el.state.toLowerCase().includes(searchItem.toLowerCase().trim())
      );
    });
    setFilteredHospitals(filteredHospitals);
  }, [searchItem]);

  console.log(Hospitals);

  return (
    <div>
      <SearchBar style={{ margin: 'auto' }} getSearchValue={getSearchValue} />
      <Container>
        {filteredHospitals && filteredHospitals.length > 0 ? filteredHospitals.map((hospital) => {
                return (
                  <HospitalCard
                    key={hospital.mobilenumber}
                    hospital={hospital}
                  />
                );
              }) : 'No data...'}
      </Container>
    </div>
  );
}

export default Home;

Answer 2

您应该使用条件渲染。阅读本指南https://reactjs.org/docs/conditional-rendering.html

{filtered != undefined ? filtered?data?data.map((hospital) => {
                return <HospitalCard key={hospital.mobilenumber} hospital={hospital}/>
            }):nothing:Hospitals.map((hospital) => {
                return <HospitalCard key={hospital.mobilenumber} hospital={hospital}/>
            }) }