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>
    //...
  )
}

NextJS getStaticProps() 不从表单值更新

1 个答案: