<p><pre class="brush:php;toolbar:false;">import React, { useState, useEffect } from "react"; "axios" から axios をインポートします。 "socket.io-client" から io をインポートします。 import { DataGrid } from "@mui/x-data-grid"; 「../NaveBar/NaveBar」から NaveBar をインポートします。 「../SideBar/SideBar」からサイドバーをインポートします; import "./NewsTable.scss"; const ソケット = io("http://localhost:5000/"); const NewsTablee = () => { const [ニュース, setNews] = useState([]); //ニュースを更新します useEffect(() => { const fetchData = async () => { 試す { const allnews = await axios.get("http://localhost:5000/api/news"); setNews(allnews.data.Date); } キャッチ (エラー) { コンソール.ログ(エラー); } }; ソケット.on("updateNewsTable", () => { fetchData(); }); }、 [ニュース]）; useEffect(() => { アクシオス .get("http://localhost:5000/api/news") .then((s) => { setNews(s.data.Date); }) .catch((er) => { コンソール.ログ(er); }); }、[]); const メッセージ = () => { socket.emit("ニュースが更新されました", "ニュースが更新されました"); }; const 列 = [ { フィールド: "_id"、 ヘッダー名: "いいえ"、 フレックス: 0.5、 renderCell: (params) => { console.log(params.row.Index 1); // この行を追加します return <div>{(params.row.index 1).toString()}</div> ; }、 }、 { フィールド: "タイトル"、ヘッダー名: "タイトル"、フレックス: 3、並べ替え可能: true }, { フィールド: "createdAt"、ヘッダー名: "createdAt"、フレックス: 2 }, { フィールド: "ユーザー名"、ヘッダー名: "ユーザー名"、フレックス: 1 }, { フィールド: "リソース"、ヘッダー名: "リソース"、フレックス: 1 }, { フィールド: "言語"、ヘッダー名: "言語"、フレックス: 1 }, { フィールド: "保護レベル"、ヘッダー名: "保護レベル"、フレックス: 1 }, { フィールド: "優先順位"、ヘッダー名: "優先順位"、フレックス: 1 }, { フィールド: "メディア"、ヘッダー名: "メディア"、フレックス: 1 }, ]; 戻る （ <> <NaveBar /> <サイドバー /> <div className='content-wrapper' style={{ minHeight: "1172.56px" }}> <div className='NewsTableContainer'> <div className='headrt'> <ボタン onClick={メッセージ} style={{ 高さ: 30, 幅: 30 }}></button> </div> <div style={{ 高さ: "570px"、幅: "100%" }} className='ニューステーブル'> <データグリッド 行={ニュース} 列={列} getRowId={(行) =>行._id} sortModel={[{ フィールド: "createdAt"、並べ替え: "desc" }]} /> </div> </div> </div> </> ); };</pre> <p>デフォルトの NewsTablee をエクスポート;}</p> <p>戻り行番号は nan</p> です。