제목은 다음과 같이 다시 작성됩니다. "Mui 데이터 테이블에서 반환된 행 번호는 NaN입니다."
<p><pre class="brush:php;toolbar:false;">import React, { useState, useEffect } from "react”;;
"axios"에서 axios를 가져옵니다.
"socket.io-client"에서 io를 가져옵니다.
"@mui/x-data-grid"에서 { DataGrid } 가져오기;;
"../NaveBar/NaveBar"에서 NaveBar를 가져옵니다.
"../SideBar/SideBar"에서 사이드바 가져오기;;
import "./NewsTable.scss";
const 소켓 = io("http://localhost:5000/");
const NewsTablee = () => {
const [뉴스, setNews] = useState([]);
//뉴스 업데이트
useEffect(() => {
const fetchData = 비동기() => {
노력하다 {
const allnews = axios.get("http://localhost:5000/api/news")을 기다리고 있습니다.
setNews(allnews.data.Date);
} 잡기(오류) {
console.log(오류);
}
};
소켓.on("updateNewsTable", () => {
페치데이터();
});
}, [소식]);
useEffect(() => {
액시오스
.get("http://localhost:5000/api/news")
.then((들) => {
setNews(s.data.Date);
})
.catch((er) => {
console.log(er);
});
}, []);
const 메시지 = () => {
소켓.emit("뉴스 업데이트됨", "뉴스 업데이트됨");
};
const 열 = [
{
필드: "_id",
헤더 이름: "아니요",
플렉스: 0.5,
렌더셀: (params) => {
console.log(params.row.Index + 1); // 이 줄을 추가하세요
return <div>{(params.row.index + 1).toString()}</div>
;
},
},
{ field: "Title", headerName: "Title", flex: 3, sortable: true },
{ 필드: "createdAt", headerName: "createdAt", flex: 2 },
{ 필드: "UserName", headerName: "UserName", flex: 1 },
{ field: "Resurce", headerName: "Resurce", flex: 1 },
{ field: "Language", headerName: "Language", flex: 1 },
{ field: "보호 수준", headerName: "보호 수준", flex: 1 },
{ 필드: "우선순위", headerName: "우선순위", flex: 1 },
{ 필드: "미디어", headerName: "미디어", flex: 1 },
];
반품 (
<>
<네이브바 />
<사이드바 />
<div className='content-wrapper' style={{ minHeight: "1172.56px" }}>
<div className='NewsTableContainer'>
<div className='headrt'>
<버튼
onClick={메시지}
스타일={{ 높이: 30, 너비: 30 }}></button>
</div>
<div 스타일={{ 높이: "570px", 너비: "100%" }} className='newsTable'>
<데이터그리드
행={뉴스}
열={열}
getRowId={(행) => 행._id}
sortModel={[{ field: "createdAt", sort: "desc" }]}
/>
</div>
</div>
</div>
</>
);
};</pre>
<p>导 Out默认NewsTablee;}</p>
<p>返回行号为nan</p>
