_app.tsx
import type { AppProps } from 'next/app';
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;
/pages/tasks/list.tsx
interface ITaskItem {
title: string;
desc?: string;
hardLevel?: string;
tag?: string[];
execTime: string;
isCompleted: boolean;
_id: string;
}
interface IProps {
listData: ITaskItem[];
}
const TaskList = (props: IProps) => {
const { Header, Content, Footer, Sider } = Layout;
const handleUpdate = (
value: string | boolean,
key: string,
item: ITaskItem
) => {
axios
.post('http://82.156.32.251:3000/tasks/update', {
targetId: item._id,
[key]: value,
})
.then((res) => {
message.success('succeed');
//after Updating successfully,i wanna to update the whole list
//but error:getServerSideProps() is not defined
getServerSideProps();
});
};
return (
<>
<Head>
<title>list page</title>
<meta name="description" content="task lists" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Card title="任务列表">
{props.listData.map((item) => (
<div className="record" key={item._id}>
<Typography.Title
level={5}
editable={{
onChange: (value) => handleUpdate(value, 'title', item),
}}
>
{item.title}
</Typography.Title>
</div>
))}
</Card>
</>
);
};
export default TaskList;
export async function getServerSideProps() {
const task_list = await axios.get('http://82.156.32.251:3000/tasks/list');
return {
props: {
listData: task_list.data.data,
},
};
}
当时看文章说getServerSideProps适合动态数据,所以采用了这个方法,但是怎么才能更新里面的数据呢