我的编辑按钮添加了一个新项目，但我的新项目链接不起作用.这就是REACT

Question

我有使用JSON服务器的React问题，我的编辑按钮添加了一个新项目，当它应该编辑当前项目和新项目链接不起作用时，它应该打开一个表单(相同的编辑按钮打开)，当我点击保存它应该保存到数组的新项目。有什么想法吗?

我省略了所有的导入以节省空间。这是App.js

function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />}>
<Route index element={<h1>Welcome</h1>} />
<Route path="products" element={<ProductsList />}>
<Route index element={<p>Select a Product for more details</p>}/>
<Route path="new" element={<ProductForm />} />
<Route path=":productId/edit" element={<ProductForm />} />
<Route path=":productId" element={<Product />} />
<Route path="*" element={<h1>Product Not Found</h1>} />
</Route>
</Route>
<Route path="*" element={<h1>Page Not Found</h1>} />
</Routes>
</BrowserRouter>
);
}
export default App;

这是Home.js

function Home() {
return (
<>
<Navbar bg="dark" variant="dark">
<Container>
<Nav className="me-auto">
<Link to="/" className="nav-link">Home</Link>
<Link to="/products" className="nav-link">Products</Link>
<Link to="/newProduct" className="nav-link">New Product</Link>
</Nav>
</Container>
</Navbar>
<Stack gap={3} className="col-md-10 mx-auto mt-3">
<Outlet />
</Stack>
</>
)
}
export default Home

这是ProductForm.js

function ProductForm() {
let [product, setProduct] = useState({
id: "",
productName: "",
description: "",
price: "",
});
let { getProduct, addProduct, updateProduct } = useContext(ProductContext);
let navigate = useNavigate();
let { id, productName, description, price } = product;
useEffect(() => {
if (id === undefined) return;
async function fetch() {
await getProduct(id).then((product) => setProduct(product));
}
fetch();
}, [id]);
function handleChange(event) {
setProduct((preValue) => {
return { ...preValue, [event.target.name]: event.target.value };
});
}
function addOrUpdate() {
if (id === undefined) {
return addProduct(product);
} else {
return updateProduct(product);
}
}
function handleSubmit(event) {
event.preventDefault();
addProduct(product).then((product) => navigate(`/products/${product.id}`));
}
return (
<Form onSubmit={handleSubmit}>
<Form.Group className="mb-3">
<Form.Label>Name</Form.Label>
<Form.Control
type="text"
name="productName"
value={product.name}
onChange={handleChange}
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Description</Form.Label>
<Form.Control
type="text"
name="description"
value={product.description}
onChange={handleChange}
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Price</Form.Label>
<Form.Control
type="text"
name="price"
value={product.price}
onChange={handleChange}
/>
</Form.Group>
<Form.Group className="mb-3"></Form.Group>
<Button type="submit">Save</Button>
</Form>
);
}
export default ProductForm;

Answer 1

指向新产品的链接应该作为路由' products/new '，除非你将它重定向到某处

你的句柄submit on form总是调用addProduct而不是addOrUpdate