[英]ReactJs: TypeError: Cannot assign to read only property 'cartHandler' of object '#<Object>'?
在這里，我正在嘗試建立一個餐廳網站。 我已經構建了它的一半。 但我被困在某個時刻。 我收到錯誤。 我無法在我的代碼中找出問題所在。 每當我嘗試通過單擊添加按鈕添加新食物然后我得到 TypeError: Cannot assign to read only property 'cartHandler' of object '#'?.. 我試圖在 cartHandler object 中調試，但我得到了同樣的錯誤很多次。 有人可以檢查一下嗎？
這是我的 App.js 文件
import logo from './logo.svg';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import './App.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import Banner from './components/Banner/Banner';
import Header from './components/Header/Header';
import Foods from './components/Foods/Foods';
import Features from './components/Features/Features';
import Footer from './components/Footer/Footer';
// import SIgnUp from './components/SignUp/SIgnUp';
import NotFound from './components/NotFound/NotFound';
import FoodItemDetails from './components/FoodItemDetails/FoodItemDetails'
import { createContext, useContext, useState } from 'react';
import Login from './components/Login/Login';
export const userContext = createContext();
function App() {
const [cart , setCart] = useState([]);
const [orderId , setOrderId] = useState(null);
const [deliveryDetails , setDeliveryDetails] = useState({
todoor:null,road:null, flat:null, businessname:null, address: null
});
const [userEmail, setUserEmail] = useState(null);
const deliveryDetailsHandler = (data) => {
setDeliveryDetails(data)
}
const getUserEmail = (email) => {
setUserEmail(email);
}
const clearCart = () => {
const orderedItems = cart.map(cartItem => {
return {food_id : cartItem.id, quantity: cartItem.quantity}
})
const orderDetailsData = { userEmail , orderedItems, deliveryDetails }
fetch('https://red-onion-backend.herokuapp.com/submitorder' , {
method : "POST",
headers: {
"Content-type" : "application/json"
},
body : JSON.stringify(orderDetailsData)
})
.then(res => res.json())
.then(data=> setOrderId(data._id))
console.log(orderId);
setCart([])
}
const cartHandler = (data) => {
const alreadyAdded = cart.find(crt => crt.id == data.id );
const newCart = [...cart,data]
setCart(newCart);
if(alreadyAdded){
const reamingCarts = cart.filter(crt => cart.id != data);
setCart(reamingCarts);
}else{
const newCart = [...cart,data]
setCart(newCart);
}
}
const checkOutItemHandler = (productId, productQuantity) => {
const newCart = cart.map(item => {
if(item.id == productId){
item.quantity = productQuantity;
}
return item;
})
const filteredCart = newCart.filter(item => item.quantity > 0)
setCart(filteredCart)
}
const [logggedInUser, setLoggedInUser] = useState({});
const [signOutUser, setSignOutUser] = useState({});
return (
<userContext.Provider value={([logggedInUser, setLoggedInUser], [signOutUser, setSignOutUser])}>
<Router>
<div className="App">
<Switch>
<Route exact path="/">
<Header></Header>
<Banner></Banner>
<Foods></Foods>
<Features></Features>
<Footer></Footer>
</Route>
<Route path="/user">
<Login></Login>
</Route>
<Route path= "/food/:id">
<Header cart={cart}></Header>
{/* <FoodItemDetails cart={cart} cartHandler={cartHandler}></FoodItemDetails> */}
<FoodItemDetails cart={cart} cartHandler={cartHandler}></FoodItemDetails>
<Footer></Footer>
</Route>
<Route path ="*">
<NotFound></NotFound>
</Route>
</Switch>
</div>
</Router>
</userContext.Provider>
);
}
export default App;
這是我的 FoodItemDetails.js 文件
import React, { useEffect, useState } from "react";
import { useParams } from "react-router";
// import { useParams } from "react-router";
// import PreLoader from "../PreLoader/PreLoader";
import { FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import { faCartArrowDown, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
import PreLoader from "../PreLoader/PreLoader";
const FoodItemDetails = (props) => {
// const {name,shortDescription,price,images} = props.food;
console.log(props, "nashir")
const [currentFood, setCurrentFood] = useState({});
const {id} = useParams();
console.log(id);
const [quantity, setQuantity] = useState(1);
const [isSuccess, setIsSuccess] = useState(false);
const [selectedBigImage, setSelectedBigImage] = useState(null);
const [preloaderVisibility, setPreloaderVisibility] = useState("block");
// const [quantity, setQuantity] = useState(1);
useEffect(() => {
fetch("https://red-onion-backend.herokuapp.com/food/" + id)
.then((res) => res.json())
.then((data) => {
setCurrentFood(data);
setPreloaderVisibility("none");
})
.catch((err) => console.log(err));
if (currentFood.images) {
setSelectedBigImage(currentFood.images[0]);
}
window.scrollTo(0, 0);
}, [currentFood.name]);
const finalCartHandler = (currentFood) => {
currentFood.quantity = quantity;
console.log(currentFood, 'food man');
props.cartHandler = currentFood;
setIsSuccess(true);
console.log(isSuccess, "what");
}
if(isSuccess){
setTimeout(() => {
setIsSuccess(false)
console.log(isSuccess);
}, 1500);
}
return (
<div className="food-details container my-5">
<PreLoader visibility={preloaderVisibility}></PreLoader>
{currentFood.name && (
<div className="row">
<div className="col-md-6 my-5">
<h1>{currentFood.name}</h1>
<p className="my-5">{currentFood.fullDescription}</p>
<div className="d-flex my-4">
<h2>${currentFood.price.toFixed(2)}</h2>
<div className="cart-controller ml-3">
<button
className="btn"
onClick={() => setQuantity(quantity <= 1 ? 1 : quantity - 1)}
>
-
</button>
<button
className="btn"
onClick={() => setQuantity(quantity + 1)}
>
+
</button>
</div>
</div>
<div className="action d-flex align-items-center">
<button className="btn btn-danger btn-rounded" onClick={() => finalCartHandler(currentFood)}><FontAwesomeIcon icon={faCartArrowDown} /> Add</button>
</div>
<div className="more-images mt-5">
{currentFood.images.map((img, index) => (
<img
onClick={() => setSelectedBigImage(currentFood.images[index])}
className={
currentFood.images[index] === selectedBigImage
? "mr-4 small-img active-small-img"
: "mr-4 small-img"
}
height="150px"
src={img}
alt=""
/>
))}
</div>
</div>
<div className="col-md-6 my-5">
<img src={selectedBigImage} className="img-fluid" alt="" />
</div>
</div>
)}
</div>
);
};
export default FoodItemDetails;
道具是只讀屬性。 在finalCartHandler中，您正在嘗試將props.cartHandler分配給currentFood 。 我假設您想要調用props.cartHandler而不是分配它。
我還注意到在cartHandler內部，您正在檢查 id 是否與==相同，這是一個真/假等於，而===會更好地工作（在其他一些地方也有==和!= ）。
首先你不能改變道具的屬性。 它們是只讀屬性。
其次，您的cartHnadler是 function 而不是財產，但您正在分配值而不是調用 function。
props.cartHandler = currentFood; // here you are assigning value
要解決這個問題，您需要調用cartHandler並將currentFood作為參數傳遞，如下所示：-
props.cartHandler(currentFood);
ReactJs - TypeError：無法分配給對象“#”的只讀屬性“transform”<Object> '
[英]ReactJs - TypeError: Cannot assign to read only property 'transform' of object '#<Object>'
TypeError：無法分配為只讀對象“＃”的屬性“ exports” <Object> 在ReactJS中
[英]TypeError: Cannot assign to read only property 'exports' of object '#<Object>' in ReactJS
ReactJs 類型錯誤：無法分配給 object 的只讀屬性“名稱”'#<object> '<div id="text_translate"><p> 我正在嘗試更改輸入的名稱屬性，因為我的組件的 state 發生了變化。<br> 簡而言之，這就是我想要做的。</p><pre> let displayInputElement = ( <input type="text" name = {pips} placeholder="Type your answer here" className=" form-control" /> ); displayInputElement.props.name = "chicken";</pre><p> 但我收到以下錯誤</p><blockquote><p>類型錯誤：無法分配給 object '#' 的只讀屬性“名稱”</p></blockquote><p> 請我如何在反應中實現以下目標</p><pre>displayInputElement.props.name = "chicken"; let pips = displayInputElement.props.name; displayInputElement = ( <input type="text" name = "chicken" placeholder="Type your answer here" className=" form-control" /> );</pre></div></object>
[英]ReactJs TypeError: Cannot assign to read only property 'name' of object '#<Object>'
類型錯誤：無法分配給對象“[object Array]”的只讀屬性“0”
[英]TypeError: Cannot assign to read only property '0' of object '[object Array]'
TypeError：無法分配給 typescript 中的 object '[object Array]' 的只讀屬性 '0'
[英]TypeError: Cannot assign to read only property '0' of object '[object Array]' in typescript
未捕獲的TypeError：無法分配為只讀對象'＃的屬性'background' <Object> “
[英]Uncaught TypeError: Cannot assign to read only property 'background' of object '#<Object>'
未捕獲的TypeError：無法分配給對象'＃<Object>'的只讀屬性'exports'
[英]Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
TypeError：無法分配給 object 的只讀屬性 'statusKnown' '#<object> '<div id="text_translate"><p> 我正在嘗試根據我在基於反應 Class 的組件中的道具更新 state 但我收到錯誤消息</p><blockquote><p> TypeError：無法分配給 object '#' 的只讀屬性 'statusKnown'</p></blockquote><p> 這是下面的代碼</p><pre>componentDidMount(){ this.calClass() } calClass = () => { console.log(this.props.statusKnown, this.state.active); if (this.props.statusKnown == "deactive") this.setState({ active: false }); else if ((this.props.statusKnown = "active")) this.setState({ active: true }); };</pre><p> 然后在父組件中</p><pre><Button item={item} categoryID={categoryID} statusKnown={status}/>;</pre><p> 如果反應不允許這件事，那么可能的解決方案是什么？</p></div></object>
[英]TypeError: Cannot assign to read only property 'statusKnown' of object '#<Object>'
未捕獲的類型錯誤：無法分配給對象“[對象數組]”的只讀屬性“1”
[英]Uncaught TypeError: Cannot assign to read only property '1' of object '[object Array]'
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.