Проблема с огневой базой

код в 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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
40
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В вашей функции Product вы вызываете updateProduct(id,dispatch,user) следующим образом.

UpdateProduct выглядит так export const updateProduct = async (id, product, dispatch) => {}

Таким образом, вы передаете отправку в качестве параметра продукта. Переключите параметры в том же порядке, тогда все будет хорошо.

большое спасибо все получилось

Mohamed Tarek Fouad Darwish 23.03.2022 18:09

у меня есть еще одна проблема с огневой базой, она работала с добавлением продукта, а теперь не работает с обновлением

Mohamed Tarek Fouad Darwish 23.03.2022 19:46

проблема в том, что он больше не получает идентификатор в бэкэнде, потому что API отправляет ошибку

Mohamed Tarek Fouad Darwish 23.03.2022 20:39

Другие вопросы по теме