reactjs React数据获取和重新呈现

wdebmtf2  于 2023-06-29  发布在  React
关注(0)|答案(3)|浏览(101)

在我的React应用程序中,我想每5秒从DB中获取数据并显示它。数据是一个对象数组:它是一个“station“的数组,每个station都有以下属性:
1.姓名
1.状态=运行/保持
1.更新时间
我显示所有的电台和他们的信息,并在顶部显示一个工具栏,根据他们的状态(例如)计算电台的数量。“跑动:10,保持:20”)
站在一个名为“displayStations”的组件中为了实现它,我在displayStations中使用了一个状态,它保存对象数组并获取它。现在的问题是,如果我用新数组更新displayStations的状态,它下面的所有车站都将被重新渲染,但我只希望改变的车站被重新渲染。解决这个问题的最好办法是什么?

  • 代码:
function DisplayStations() {
  const [stationsData, setStationsData] = useState([]);

.
.
.

useEffect(() => {
    const fetchStationsData = async () => {
      const response = await fetch(`/stationsInfo`);
      const data = await response.json();
      setStationsData(data);
      handleStationsDataChange();
    };
    fetchStationsData();
    const fetchInterval = setInterval(() => {
      fetchStationsData();
    }, intervalTime * 1000);

    return () => {
      clearInterval(fetchInterval);
    };
  });
.
.
.
return (
    <Box>
      {stationsData.map((stationsDataObj) => {
        return <Station key={stationsDataObj['Name']} stationData={stationsDataObj} />;
      })}
    </Box>
  );
}



function Station({ stationData }) {
return (
    <div>
      <div>
        {stationData['Name']}
      </div>
      <div>
        {stationData['Status']}
      </div>
      <div>
        {stationData['updateTime']}
      </div>
    </div>
}
new9mtju

new9mtju1#

要解决此问题,您可能必须使用:

const fetchStationsData = async () => {
      const response = await fetch(`/stationsInfo`);
      const data = await response.json();
      setStationsData(data);
      handleStationsDataChange();
    };
useEffect(() => {
    fetchStationsData();
    const fetchInterval = setInterval(() => {
      fetchStationsData();
    }, intervalTime * 1000);

    return () => {
      clearInterval(fetchInterval);
    };
  },[]); //here this will work as to display the content one

希望这对你有帮助。

juud5qan

juud5qan2#

正如在评论中提到的,你可以使用React.memo HOC来 Package 你的组件,这样当 prop 没有改变时它就不会重新渲染。
默认情况下,它进行浅层比较。为了比较 prop 是否真的改变了,你可以传递函数作为 prop 比较的第二个参数。
你可以像下面这样做。

import { memo } from "react";

const Station = ({ stationData }) => {
  return (
    <div>
      <div>{stationData["Name"]}</div>
      <div>{stationData["Status"]}</div>
      <div>{stationData["updateTime"]}</div>
    </div>
  );
};

function propsAreEqual(prevProps, nextProps) {
  return prevProps.Name === nextProps.Name;
}

export default memo(Station, propsAreEqual);
2exbekwf

2exbekwf3#

如果某些值在重新渲染之间没有改变,你可以告诉React跳过应用效果。为此,将数组作为可选的第二个参数传递给useEffect。
示例:
useEffect(() => { document.title =您点击了${count}次; }, [count]); // Only re-run the effect if count changes
来源:https://legacy.reactjs.org/docs/hooks-effect.html

相关问题