код в product.jsx проблема в том, что я хочу обновить данные, но они не работают с firebase и перестали обновлять все, поэтому мне нужна помощь
export default function Product() {
const [user,setUser]=useState({});
const [file, setFile] = useState(null);
const location = useLocation();
const productId = location.pathname.split("/")[2];
const [pStats, setPStats] = useState([]);
const product = useSelector((state) =>
state.product.products.find((product) => product._id === productId)
);
const handleChangeEvent =(e)=>{
const value=e.target.value;
setUser({
...user,
[e.target.name]:value
});
};
console.info(user)
const dispatch = useDispatch();
const handleclick=(id)=>{
const fileName = new Date().getTime() + file.name;
const storage = getStorage(app);
const storageRef = ref(storage, fileName);
const uploadTask = uploadBytesResumable(storageRef, file);
uploadTask.on(
"state_changed",
(snapshot) => {
// Observe state change events such as progress, pause, and resume
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
const progress =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.info("Upload is " + progress + "% done");
switch (snapshot.state) {
case "paused":
console.info("Upload is paused");
break;
case "running":
console.info("Upload is running");
break;
default:
}
},
(error) => {
// Handle unsuccessful uploads
},
() => {
// Handle successful uploads on complete
// For instance, get the download URL: https://firebasestorage.googleapis.com/...
getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
const userr = { ...user, img: downloadURL};
updateProduct(id,dispatch,userr)
});
}
);
}
useEffect(() => {
updateProduct(dispatch);
}, [dispatch]);
const MONTHS = useMemo(
() => [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Agu",
"Sep",
"Oct",
"Nov",
"Dec",
],
[]
);
useEffect(() => {
const getStats = async () => {
try {
const res = await userRequest.get("order/income?pid = " + productId);
const list = res.data.sort((a,b)=>{
return a._id - b._id
})
list.map((item) =>
setPStats((prev) => [
...prev,
{ name: MONTHS[item._id - 1], Sales: item.total },
])
);
} catch (err) {
console.info(err);
}
};
getStats();
}, [productId, MONTHS]);
return (
<div className = "product">
<div className = "productTitleContainer">
<h1 className = "productTitle">Product</h1>
<Link to = "/newproduct">
<button className = "productAddButton">Create</button>
</Link>
</div>
<div className = "productTop">
<div className = "productTopLeft">
<Chart data = {pStats} dataKey = "Sales" title = "Sales Performance" />
</div>
<div className = "productTopRight">
<div className = "productInfoTop">
<img src = {product.img} alt = "" className = "productInfoImg" />
<span className = "productName">{product.title}</span>
</div>
<div className = "productInfoBottom">
<div className = "productInfoItem">
<span className = "productInfoKey">id:</span>
<span className = "productInfoValue">{product._id}</span>
</div>
<div className = "productInfoItem">
<span className = "productInfoKey">sales:</span>
<span className = "productInfoValue">5123</span>
</div>
<div className = "productInfoItem">
<span className = "productInfoKey">in stock:</span>
<span className = "productInfoValue">{product.inStock}</span>
</div>
</div>
</div>
</div>
<div className = "productBottom">
<form className = "productForm">
<div className = "productFormLeft">
<label>Product Name</label>
<input type = "text" placeholder = {product.title} name = "title" onChange = {handleChangeEvent}/>
<label>Product Description</label>
<input type = "text" placeholder = {product.desc} name = "desc" onChange = {handleChangeEvent} />
<label>Price</label>
<input type = "text" placeholder = {product.price} name = "price" onChange = {handleChangeEvent} />
<label>In Stock</label>
<select name = "inStock" id = "idStock" onChange = {handleChangeEvent}>
<option value = "true">Yes</option>
<option value = "false">No</option>
</select>
</div>
<div className = "productFormRight">
<div className = "productUpload">
<img src = {product.img} alt = "" className = "productUploadImg" />
<label for = "file">
<Publish />
</label>
<input type = "file" id = "file" style = {{ display: "none" }} name = "img" onChange = {(e) => setFile(e.target.files[0])} />
</div>
<button className = "productButton" onClick = {(e)=>handleclick(product._id)}>Update</button>
</div>
</form>
</div>
</div>
);
}
код в apicalls (редукс)
import {
updateProductFailure,
updateProductStart,
updateProductSuccess,
} from "./productRedux";
export const updateProduct = async (id, product, dispatch) => {
dispatch(updateProductStart());
try {
const res=await userRequest.patch(`/products/find/${id}`,product)
dispatch(updateProductSuccess({ id, product }));
} catch (err) {
dispatch(updateProductFailure());
}
};
}
код в редуксе продукта
export const productSlice = createSlice({
name: "product",
initialState: {
products: [],
isFetching: false,
error: false,
},
reducers: {
updateProductStart: (state) => {
state.isFetching = true;
state.error = false;
},
updateProductSuccess: (state, action) => {
state.isFetching = false;
state.products[
state.products.findIndex((item) => item._id === action.payload.id)
] = action.payload.product;
},
updateProductFailure: (state) => {
state.isFetching = false;
state.error = true;
},
}
я хочу обновить свои продукты, отправив данные от клиента в API, я думаю, проблема в функции updateProductsucess
В вашей функции Product вы вызываете updateProduct(id,dispatch,user)
следующим образом.
UpdateProduct выглядит так export const updateProduct = async (id, product, dispatch) => {}
Таким образом, вы передаете отправку в качестве параметра продукта. Переключите параметры в том же порядке, тогда все будет хорошо.
у меня есть еще одна проблема с огневой базой, она работала с добавлением продукта, а теперь не работает с обновлением
проблема в том, что он больше не получает идентификатор в бэкэнде, потому что API отправляет ошибку
большое спасибо все получилось