Saya masih cuba memahami senario ini. Bolehkah sesiapa mencadangkan cara yang betul untuk melakukan ini dalam Next.js 13?
Saya memaparkan senarai pengguna dalam komponen pelayan, contohnya seperti ini (menggunakan MongoDB):
// UsersList.jsx
const UsersList = () => {
const users = await usersCollection.getUsers()
return (
<div>
{users.map(user) => <div>{user}</div>}
</div>
)
}
Pada halaman yang sama saya juga menentukan komponen pelanggan untuk menambah pengguna:
// UsersEdit.jsx
'use client'
const UsersEdit = () => {
const handleAdd() => // calls POST to /api/users
return // render input + button
}
Kedua-duanya dipaparkan bersama dalam halaman komponen pelayan, seperti yang ditunjukkan di bawah:
// page.jsx
const Users = () => {
return (
<div>
<UsersList />
<UsersEdit />
</div>
)
}
Bagaimanakah saya harus "memuat semula" atau "memberitahu" UsersList bahawa pengguna baharu telah ditambahkan pada koleksi untuk memaksanya menunjukkan pengguna baharu/dikemas kini?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
https://stackoverflow.com/a/75127011/17964403 Ini bagus untuk bermutasi pada sisi klien, tetapi jika anda ingin melakukan sesuatu seperti mencari/menapis menggunakan input daripada klien, dan ingin mengambil semula data yang sama, anda boleh melakukan sesuatu seperti
const [searchterm, setSearchterm] = useState(""); const handleSearch = (e) => { e.preventDefault(); if(!searchterm)return router.push(/home?search=`${searchterm}`) }Dalam komponen pelayan anda akan menerima parameter carian sebagai prop, lihat jika parameter carian wujud, jika wujud kemudian lulus parameter itu dalam panggilan ambil dan anda akan mendapat item yang ditapis.
Untuk menggambarkan data yang dikemas kini oleh komponen klien pada komponen pelayan, anda boleh menggunakan
router.refresh()，其中router是useRouter(). Berikut ialah contoh menggunakan apl senarai tugasan:// app/page.tsx import Todo from "./todo"; async function getTodos() { const res = await fetch("https://api.example.com/todos", { cache: 'no-store' }); const todos = await res.json(); return todos; } export default async function Page() { const todos = await getTodos(); return ( <ul> {todos.map((todo) => ( <Todo key={todo.id} {...todo} /> ))} </ul> ); }// app/todo.tsx "use client"; import { useRouter } from 'next/navigation'; import { useState, useTransition } from 'react'; export default function Todo(todo) { const router = useRouter(); const [isPending, startTransition] = useTransition(); const [isFetching, setIsFetching] = useState(false); // Create inline loading UI const isMutating = isFetching || isPending; async function handleChange() { setIsFetching(true); // Mutate external data source await fetch(`https://api.example.com/todo/${todo.id}`, { method: 'PUT', body: JSON.stringify({ completed: !todo.completed }), }); setIsFetching(false); startTransition(() => { // Refresh the current route and fetch new data from the server without // losing client-side browser or React state. router.refresh(); }); } return ( <li style={{ opacity: !isMutating ? 1 : 0.7 }}> <input type="checkbox" checked={todo.completed} onChange={handleChange} disabled={isPending} /> {todo.title} </li> ); }⚠️: Cache hasil yang sama mungkin dijana semula jika permintaan pengambilan dicache . Inilah sebabnya
cache: 'no-store'cache: 'no-store'dalam contoh ini