タイトルは「Mui データ テーブルから返された行番号は NaN です」のように書き換えられます。
<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> です。
