在数据库更改时反应重新渲染组件

Question

我正在尝试开发一个动态的待办事项列表。

我有两个组件 TodoList 和 Todo。 TodoList 使用 useSWR 从 Mongo 获取数据，并根据它们是否完成将数据放入 div 中。

Todo 组件有一个按钮来标记任务是否已完成。 当您单击输入检查时，它会在 mongo 上自动更改。

现在我希望这些更改也反映在列表中。 例如，如果一项任务未完成，它就会出现在待办事项中。 在此处输入图像描述

当我检查数据库中的输入时，它被标记为已完成，但它仍然显示为未完成：在此处输入图像描述

TodoList.tsx

import React, { useState } from 'react';
import useSWR from 'swr';
import axios from 'axios';
import Todo from './Todo';

const fetcher = (url: string) => axios.get(url).then(res => res.data)

export default function TodoList() {

  const { data, error } = useSWR('/api/v1/todos-all', fetcher)
  if (error) return <div>failed to load</div>;
  
  if (!data) return <div>loading...</div>;


  return (
    <div>
      <div>
        <h1>To Do</h1>
        {
          data.todos.map((todo: any) => !todo.completed ? (<Todo key={todo._id} id={todo._id} title={todo.title} completed={todo.completed}/>) : (<></>))
        }
      </div>

      <div>
        <h1>Completed</h1>
        {
          data.todos.map((todo: any) => todo.completed ? (<Todo key={todo._id} id={todo._id} title={todo.title} completed={todo.completed}/>) : (<></>))
        }
      </div>
      
    </div>
  )
}

Todo.tsx

import React, { useState } from 'react';
import styled from 'styled-components';
import axios from 'axios';

interface ITodo {
    title: string;
    id: string;
    completed: boolean;
}

const TodoSyle = styled.div`
    background-color: #fff;
    padding: 20px;
    margin: 10px;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    `;

export default function Todo({title, id, completed}: ITodo) {

    const [checked, setChecked]= useState(completed)

    const handleClick = () => {

        setChecked(!checked)

        axios.put(`/api/v1/todo/${id}`, {"completed": `${!completed}`})
    }

    console.log(id)

    return (
        <TodoSyle>
            {title}
            <input type="checkbox" checked={checked} onChange={handleClick}/>
        </TodoSyle>
    )
}

直到你刷新 pag.，它再次从 db 获取数据并且它工作。 单击复选按钮时，有没有办法重新呈现应用程序？ 或者有更好的方法来解决这些问题？

谢谢

Answer 1

默认情况下， useSWR不会自动重新获取（重新验证）数据，缓存仍将具有旧数据。

您可以使用refreshInterval选项启用自动重新获取。

const { data, error } = useSWR('/api/v1/todos-all', fetcher, { refreshInterval: 1000 });

或者在对 API 的 PUT 请求后使用突变显式更新缓存中的数据。

axios.put(`/api/v1/todo/${id}`, {"completed": `${!completed}`})
  .then(() => {
      mutate()
  })

Answer 2

我以前从未使用useSWR钩子，但也许它可以帮助你。

您应该将handleClick function 移动到TodoList.tsx并使用mutate更新客户端缓存（ data ）

const { data, error, mutate } = useSWR('/api/v1/todos-all', fetcher);

...

const handleClick = (todo, value) => {
  axios.put(`/api/v1/todo/${todo._id}`, { completed: !value}).then(() => {
    todo.completed = value;
    mutate([...todos]);
  });
};

return
  ...
    {
      data.todos.map((todo: any) =>
        todo.completed ? (
          <Todo key={todo._id} todo={todo} onClick={handleClick} />
        ) : null
      );
    }

Todo.tsx

...
<input
  type="checkbox"
  value={todo.checked}
  onChange={(e) => onClick(todo, e.target.checked)}
/>