axios不會在重繪時獲取，僅在第一次渲染時獲取

因此，我一直在努力從 API 檢索資料或檢索本地 json 檔案。我正在使用 React axios，但即使使用正常的 fetch 方法，我也遇到了同樣的問題。當我獲取端點并保存代碼時，我的 jsx 重繪 并且資料出現在螢屏上，但是當我重繪 頁面時，它不再存在并且在我一次又一次重繪 時不會出現。我不知道我做錯了什么。我試圖檢索父級上的資料并將其設定為道具，但仍然是同樣的問題。

我的子組件：

import React, { useEffect, useState } from 'react';

import './Card.scss';

import axios from 'axios';

import { ellipsisIcon } from '../../constants/images';

import dataJson from './data.json';

const Card = ({ name, color, icon, currentTime }) => {
  const [data, setData] = useState([]);

  const [daily, setDaily] = useState([]);
  const [weekly, setWeekly] = useState([]);
  const [monthly, setMonthly] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios.get('data.json');
      setData(result.data);
      setData(
        data.filter((item) => {
          return item.title === name;
        }),
      );

      setDaily(data[0].timeframes.daily);
      setWeekly(data[0].timeframes.weekly);
      setMonthly(data[0].timeframes.monthly);
    };
    fetchData();
  }, []);

  return (
    <div className="card" style={{ backgroundColor: `${color}` }}>
      <img src={icon} alt={`${name} icon`} />
      <div className="card__container bg-blue">
        <div className="card__top-container flex">
          <p className="text-white ">{name}</p>
          <div className="card__top__elipse-container">
            <img src={ellipsisIcon} alt="ellipsis" />
          </div>
        </div>
        <div className="card__bottom-container">
          {currentTime === 0 && (
            <>
              <h1 className="fs-900 text-white">{daily.current}hrs</h1>
              <div className="card__bottom__prev-container">
                <p className="text-accent ">
                  Yesterday -<span>{daily.previous}hrs</span>
                </p>
              </div>
            </>
          )}
          {currentTime === 1 && (
            <>
              <h1 className="fs-900 text-white">{weekly.current}hrs</h1>
              <div className="card__bottom__prev-container">
                <p className="text-accent ">
                  Last Week -<span>{weekly.previous}hrs</span>
                </p>
              </div>
            </>
          )}
          {currentTime === 2 && (
            <>
              <h1 className="fs-900 text-white">{monthly.current}hrs</h1>
              <div className="card__bottom__prev-container">
                <p className="text-accent">
                  Last Month -<span>{monthly.previous}hrs</span>
                </p>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

export default Card;

我的應用程式（家長）：

import { useState, useEffect } from 'react';
import Card from './components/Card/Card';

import {
  pbImage,
  ellipsisIcon,
  exerciseIcon,
  playIcon,
  careIcon,
  socialIcon,
  studyIcon,
  workIcon,
} from './constants/images';

const cards = [
  {
    name: 'Exercise',
    color: 'hsl(var(--clr-exercise))',
    icon: exerciseIcon,
  },
  {
    name: 'Play',
    color: 'hsl(var(--clr-play))',
    icon: playIcon,
  },
  {
    name: 'Self Care',
    color: 'hsl(var(--clr-care))',
    icon: careIcon,
  },
  {
    name: 'Social',
    color: 'hsl(var(--clr-social))',
    icon: socialIcon,
  },
  {
    name: 'Study',
    color: 'hsl(var(--clr-study))',
    icon: studyIcon,
  },
  {
    name: 'Work',
    color: 'hsl(var(--clr-work))',
    icon: workIcon,
  },
];

function App() {
  const [selectedTime, setSelectedTime] = useState(2);
  return (
    <div className="app bg-dark">
      <div className="main__container grid">
        <div className="side__card-container">
          <div className="side__card__top flex">
            <div className="side__card__top__pb-container">
              <img
                src={pbImage}
                alt="pb"
                className="side__card__top__pb-image pb-image"
              />
            </div>
            <div className="side__card__top__person-container">
              <p className="fs-600 text-accent">Report for</p>
              <h2 className="fs-800 text-white">Jeremy Robson</h2>
            </div>
          </div>
          <div className="side__card__bottom">
            <div>Daily</div>
            <div>Weekly</div>
            <div>Monthly</div>
          </div>
        </div>
        {cards.map((card, _index) => (
          <Card
            key={_index}
            name={card.name}
            color={card.color}
            icon={card.icon}
            currentTime={selectedTime}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

uj5u.com熱心網友回復：

正如我在評論中提到的，狀態是異步更新的。因此，在設定狀態值后立即使用狀態時應該小心。在您的情況下，您不應該使用該data狀態，因為您不確定它是否具有價值。試著改成這個。

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios.get('data.json');
      const filteredData = result.data.filter((item) => {
          return item.title === name;
      })

      setData(filteredData);
      
      // make sure result data isn’t empty
      setDaily(result.data[0].timeframes.daily);
      setWeekly(result.data[0].timeframes.weekly);
      setMonthly(result.data[0].timeframes.monthly);
    };
    fetchData();
  }, []); // "[]" makes the useEffect callback only run after the first render

標籤：javascript 反应 json axios

上一篇：如何在不替換新密鑰的情況下保留JSON中的第一個密鑰？

下一篇：Scrapy：無法將json匯出到csv