reactjs React数据获取和重新呈现

wdebmtf2 于 2023-06-29 发布在 React

关注(0)|答案(3)|浏览(102)

在我的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>
}

reactjs

来源：https://stackoverflow.com/questions/76572749/react-data-fetching-rerenders

3条答案

按热度按时间

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

希望这对你有帮助。

赞(0）回复(0）举报 2023-06-29

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);

赞(0）回复(0）举报 2023-06-29

2exbekwf3#

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

赞(0）回复(0）举报 2023-06-29

我来回答

reactjs React数据获取和重新呈现

3条答案

相关问题

热门标签

最新问答