NextJS getStaticProps()未从表单值更新

Question

使用UpdateParams提交后，将调用新的url，并按预期返回包含新查询数据的JSON对象
表单会更新两个状态变量
但是，"所有产品"视图中的产品不会更新以反映表单输入
我需要做些什么来刷新渲染以反映产品中的新数据

//all-products.js    
import Link from 'next/link'
import React from 'react';
import { useState } from 'react';
//gets data from local api
async function getData(rank, keyword){
const res = await fetch(`http://localhost:4000/api?top=${rank}&keyword=${keyword}`);
return res;
} 
export async function getStaticProps() {
const rank = 5;
const keyword = "shorts";   
const response = await getData(rank, keyword);
const products = await response.json();
console.log(products);
if (!products) {
return {
notFound: true,
}
}
return {
props: {
products,
},
}
}
export default function AllProducts(stuff) {
let {products} = stuff; 
const [rank, setRank] = useState("3");
const [keyword, setKeyword] = useState("shoes");
//from form 
const updateParams = async (e) => {
e.preventDefault();
const response= await getData(rank, keyword);
products = await response.json();
}
return (
<div>
<input
type='text'
placeholder='topRank'
value={rank}
onChange={e => setRank(e.target.value)}
/>
<input
type="text"
placeholder='searchTerm'
value={keyword}
onChange={e => setKeyword(e.target.value)}
/>
<button
type='submit'
onClick={updateParams}>
Update Params</button>
<ul>
{products.Products.map((product) => {
return (
<div key={product.Id}>
<li>{product.Name}</li>
<li><img width={300} src={ product.imgUrl } alt="product image" /></li>
</div>

) }
)}
</ul>

</div>
)
}

Answer 1

getStaticProps在构建时运行，因此它将提供当时可用的数据。要在用户与表单交互后更新UI，您应该将products置于状态，并在提交新参数并检索新产品后进行更新。

// all-products.js - removed irrelevant code for simplicity
export default function AllProducts(stuff) {
const [products, setProducts] = useState(stuff.products);
//...
const updateParams = async (e) => {
e.preventDefault();
const response = await getData(rank, keyword);
const newProducts = await response.json();
setProducts(newProducts);
}
return (
//...
<ul>
{products.Products.map((product) => {
return (
<div key={product.Id}>
<li>{product.Name}</li>
<li><img width={300} src={product.imgUrl} alt="product image" /></li>
</div>

)
})}
</ul>
//...
)
}