【发布时间】：2021-06-21 05:53:34
【问题描述】：
我需要在按钮单击时绑定值，我得到未定义，这里我使用 Redux 概念，所以现在我写了一个动作来获得一个单一的产品，在我调度动作的组件中。 但是我得到了 Undefined(xhr.js:177 GET http://localhost:3000/users/undefined 404 (Not Found))，请任何人都可以帮助我...在此先感谢
这是我的操作代码
// get a product
export const fetchProduct = (productId:string) => {
return async (dispatch:any) => {
try {
let dataURL : string = `http://localhost:3000/users/${productId}`;
let response = await axios.get(dataURL);
dispatch({type : FETCH_PRODUCT_SUCCESS , payload : response.data});
}
catch (error) {
console.log(error)
}
};
};
这是我的组件
interface URLParamType {
productId : string;
}
interface IProps {}
interface IState {
selectedProduct: IProduct;
isSubmitted : boolean;
}
const UpdateProduct = () => {
let dispatch = useDispatch();
let history = useHistory();
let {productId} = useParams<URLParamType>();
// get product information from Redux Store
let getalldatafromserver :allReducer.Iproducts = useSelector((state : {fetchalldata:allReducer.Iproducts})=>{
return state.fetchalldata;
})
useEffect(() => {
// get a single product from server and keep in the Redux Store
console.log(getalldatafromserver);
dispatch(allActions.fetchProduct(productId));
}, [productId]);
return (
<React.Fragment>
{/* <pre>{JSON.stringify(selectedProduct)}</pre> */}
<section className="mt-3">
<div className="container">
<div className="row">
<div className="col">
<p className="h3 text-secondary">Update Product</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex impedit, incidunt ipsum nulla sapiente sint suscipit? A animi, error et fuga ipsum minus, nam officia praesentium quisquam, recusandae soluta voluptate?</p>
</div>
</div>
</div>
<div className="container">
<div className="row">
<div className="col-md-4">
<div className="card">
<div className="card-header bg-secondary text-white">
<p className="h4">Update Product</p>
</div>
<div className="card-body rgba-green-light">
<form >
<div className="form-group">
<input
required
name="name"
// onChange={updateInput}
// value={getalldatafromserver.products.name}
type="text" className="form-control" placeholder="Name"/>
</div>
<div className="form-group mt-2">
{/* <input
name="image"
// onChange={updateImage}
className="form-control" type="file" id="formFile"/>
<img src={getalldatafromserver.selectedproduct.image} alt="" width="25" height="25"/> */}
</div>
<div className="form-group mt-2">
<input
required
name="price"
// onChange={updateInput}
// value={getalldatafromserver.selectedproduct.price}
type="number" className="form-control" placeholder="Price"/>
</div>
<div className="form-group mt-2">
<input
required
name="qty"
// onChange={updateInput}
// value={getalldatafromserver.selectedproduct.qty}
type="number" className="form-control" placeholder="Qty"/>
</div>
<div className="form-group mt-2">
<textarea
required
name="info"
// onChange={updateInput}
// value={getalldatafromserver.selectedproduct.info}
rows={3} className="form-control" placeholder="Information"/>
</div>
<div className="form-group mt-2">
<td>
<Link to={`/products/${product.id}`} className="btn btn-secondary btn-sm">Update</Link>
<button onClick={()=> {deleteProduct(product.id as string)}} className="btn btn-danger btn-sm">Delete</button>
</td>
<input type="submit" className="btn btn-secondary btn-sm" value="Update"/>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</React.Fragment>
)
}
【问题讨论】：
标签： reactjs typescript redux