使用 React 的数据 Fatch （Nextjs）-解网

问：

我正在使用 next.js 并且正在从 json 获取数据。现在我看不到来自json的数据（当我刷新时会发生变化），例如在表的第一个框中。

有人可以帮我吗？我试了这么多天，我无法解决。

import styles from '../styles2/Tabelle.module.css';
import { useEffect, useState } from 'react';

export default function Fetch() {
    'use client';
    const [appState, setAppState] = useState([]);
    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch('https://run.mocky.io/v3/f3bf41f3-c60a-47f8-9386-243989bead65');
            const json = await response.json();
            setAppState(json);
        };
        fetchData();
    }, []);

    const date = (
        <ul>
            {appState.map((item) => (
                <li key={item.id}> {item.id} </li>
            ))}
        </ul>
    );
    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th>ID ESECUZIONE </th> <th>NOME PROCESSO</th> <th>HOST</th> <th>ANDAMENTO</th> <th>DURATA</th> <th>AVANZAMENTO</th>{' '}
                    </tr>
                </thead>
                <tbody>
                    <tr className={styles.righeEsecuzioni}>
                        <td> {date.key} </td>{' '}
                    </tr>
                </tbody>
            </table>
        </div>
    );
}

reactjs next.js fetch-api nsfetchrequest urlfetch

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

export default function Fetch() {
  'use client';
  const [appState, setAppState] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get(
        'https://run.mocky.io/v3/f3bf41f3-c60a-47f8-9386-243989bead65'
      );
      const string = '[' + response.data + ']';
      setAppState(JSON.parse(string));
    };
    fetchData();
  }, []);
  const date = (
    <ul>
      {appState.map((item: any) => (
        <li key={item.id}> {item.id} </li>
      ))}
    </ul>
  );
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>ID ESECUZIONE </th> <th>NOME PROCESSO</th> <th>HOST</th>{' '}
            <th>ANDAMENTO</th> <th>DURATA</th> <th>AVANZAMENTO</th>{' '}
          </tr>
        </thead>
        <tbody>
          <tr>
            <td> {date} </td>{' '}
          </tr>
        </tbody>
      </table>
    </div>
  );
}

按日期排序

使用 dayjs 库

在字符串变量后面添加此内容

const response = await axios.get(
    'https://run.mocky.io/v3/f3bf41f3-c60a-47f8-9386-243989bead65'
  );
  const string = '[' + response.data + ']';
  const parsedString = JSON.parse(string);
  parsedString.sort((date1: any, date2: any) => {
    return dayjs(date1.Giorno).isBefore(dayjs(date2.Giorno)) ? -1 : 1;
  });
  setAppState(parsedString);

使用 React 的数据 Fatch （Nextjs）

Data Fatch with React (Nextjs)

评论

评论