[英]typeError :Cannot assign to read only property 'addContactHandler' of object '#<Object>'
試圖模仿的項目的 gihub 鏈接在該項目中,他在添加聯系人中使用了類組件,但我使用了功能組件,還添加了另一個字段。 ] 1 。 以前我把所有的道具都放在了一起。
這是 AddContact.js
import React,{useState} from 'react'
const AddContact =(props) =>{
const [contactName, SetContactName] = useState("");
const [contactEmail, SetContactEmail] = useState("");
const [contactPhone, SetContactPhone] = useState("");
const Add = (e) => {
e.preventDefault();
if(contactName === "" || contactEmail === ""|| contactPhone === "")
{
alert("All fields are mandatory!!");
return
}
// props.addContactHandler={contactName};//this is child and from here i want to pass data to app.js
props.addContactHandler={contactEmail};//this is child and from here i want to pass data to app.js
// props.addContactHandler={contactPhone};//this is child and from here i want to pass data to app.js
SetContactName("");
SetContactEmail("");
SetContactPhone("");
}
這是來自 App.js
const [contacts, setContacts] = useState([]);
const addContactHandler = (contact) => {
console.log(contact);
setContacts([...contacts, { id: Math.random()*1000, ContactEmail : props.ContactEmail, ...contact }]);
}
在 React 中,道具是只讀的,這意味着您不能為任何道具重新分配任何值。 在您嘗試分配 prop.addContactHandler = somevalue 的代碼中。 這是完全無效的。 如果要將任何值傳遞給父組件,請調用一個方法。
例如在 App.js const updateVal = v => {此塊更新本地狀態}
假設您已將此方法傳遞給子組件。 在子組件中你需要調用這個方法如下 props.updateVal(newValue)
Props.addContactHandler 是一個函數。 所以代替
props.addContactHandler={contactEmail};
你需要做類似的事情
props.addContactHandler(contactEmail);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.