如何更新getServerSideProps返回的数据

_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适合动态数据,所以采用了这个方法,但是怎么才能更新里面的数据呢

阅读 990
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题