Quiero obtener el enrutamiento de la API dinámica después de ingresar el envío con el estado de entrada. pero no sé cómo pasar el estado de reaccionar a getServerSideProps.
este es mi codigo
export default function Home(props) { const { data } = props; const [input, setInput] = useState(""); const handlerChange = (event) => { setInput(event.target.value); }; const handlerSubmit = () => { console.log(event.target.value); setInput(""); }; return ( <input type="text" className="form-control" placeholder="Group Name" value={input} onChange={handlerChange} onKeyDown={(event) => event.key === "Enter" && handlerSubmit(event) } /> ) export async function getServerSideProps() { const res = await fetch(`http://localhost:3000/api/searchGroup/${input}`) const data = await res.json() return { props: { data } } }En su lugar, podría usar una ruta dinámica para navegar a algo como /your-current-page/${input} y luego tendría acceso al valor de entrada como un parámetro en getServerSideProps como tal:
export async function getServerSideProps({ params }) { const { input } = params; ... }Más información sobre esto aquí
Debe realizar la solicitud con el valor de input actualizado desde el lado del cliente en lugar de dentro de la devolución de llamada handlerSubmit y guardar los data para que se representen en una variable de estado (por ejemplo dataToRender ).
const getData = async (input) => { const res = await fetch(`http://localhost:3000/api/searchGroup/${input}`) return res.json() } export default function Home(props) { const { data } = props; const [dataToRender, setDataToRender] = useState(data); const [input, setInput] = useState(""); const handlerChange = (event) => { setInput(event.target.value); }; const handlerSubmit = async (event) => { setInput(""); const newData = await getData(event.target.value); setDataToRender(newData); }; return ( <input type="text" className="form-control" placeholder="Group Name" value={input} onChange={handlerChange} onKeyDown={(event) => event.key === "Enter" && handlerSubmit(event) } /> ) } Como alternativa a lo anterior, si es absolutamente necesario tener la solicitud en getServerSideProps , puede pasar el valor de input como un parámetro de consulta y leerlo desde context.query.input en getServerSideProps .
// On the client-side import { useRouter } from "next/router"; export default function Home(props) { const router = useRouter() const handlerSubmit = () => { console.log(event.target.value); setInput(""); router.push(`${router.pathname}?input=${event.target.value}`); } // Remaining code... } // On the server-side export async function getServerSideProps(context) { const res = await fetch(`http://localhost:3000/api/searchGroup/${context.query.input ?? 'default-value'}`) const data = await res.json() return { props: { data } } }