我正在尝试访问 React 函数之外的状态
我要做的就是点击保存我需要获取表单中的所有详细信息并通过 API 提交，
以下是我的完整代码，我只删除了导入的组件详细信息，
我们需要的是当点击保存时，表单应该通过API调用提交
这是我的代码：
**
function save() {
let contactid=editcontacts.id;
const updateapi=axios.create({baseURL:"https://108.248.238.235/TiaraDeskAPI/api/v1/contacts/"+contactid})
let name = editcontacts.contact_name
let email =editcontacts.email
let phone = editcontacts.phone
let address = editcontacts.address
let city = editcontacts.city
let state = editcontacts.state
let country = editcontacts.country
let pincode = editcontacts.zipcode
let accountid=selected[0].id;
//const notes = document.getElementById('input-notes').value
const json={"account" : accountid,"contact_name" : name, "email" : email,"phone" :phone, "street" : address, "city" : city, "state" : state, "country" : country, "zipcode" : pincode};
console.log(json);
api.post("/",json,options).then(response => {
console.log(response.data.message);
})
}
**
const EdittableData = () => {
const [selected, setSelected] = useState([]);
const [lookuplist, setaccount2] = React.useState([]);
const [editcontacts, setaccount] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const api=axios.create({baseURL:"https://18.28.238.25/TI/api/v1/contacts/1/"+contactid})
const accountapi=axios.create({baseURL:"https://18.48.28.25/TI/api/v1/account"})
const options = {
headers: {'Authorization': apitoken}
}
//let id = useParams();
console.log(params.id);
React.useEffect(async () => {
const response = await api.get("/",options);
const response2 = await accountapi.get("/",options);
setLoading(false);
}, []);
if (loading) {
return <>Loading...</>;
}
return(
<>
<Form>
<h6 className="heading-small text-muted mb-4">
Contact Information
</h6>
<div className="pl-lg-4">
<Row>
<Col lg="12">
<FormGroup>
<label
className="form-control-label"
htmlFor="input-username"
>
Contact Name
</label>
<Input
className="form-control-alternative"
id="input-username"
placeholder="Username"
type="text"
defaultValue={editcontacts.contact_name}
/>
</FormGroup>
</Col>
</Row>
</div>
</Form>
</>
)
}
const Viewcontact = () => {
return (
<>
<Header />
{/* Page content */}
<Container className="mt--7" fluid>
***************
<Button
color="primary"
href="#pablo"
onClick={save}
size="sm"
>
Edit
</Button>
*****************
</>
)};
export default Viewcontact;
```
I am trying to call function save in react and access the states but failed,
The error is , I cant able to access any states or variables, can you help me please
Thanks in advance
答案 0 :(得分：1)
您无法访问外部组件的状态。如果您希望访问组件外部的状态，您可以选中 React Context（多个组件的共享状态）。
但是，您可以重新考虑您的方法：如果您能够在 <EdittableData /> 中调用 <Viewcontact />，您可以将所有表单的状态和 save() 函数放在 <ViewContact /> 组件中.然后您可以将您的状态作为 <EdittableData> 传递给 props。这样，save() 函数和 <EdittableData> 组件将可以访问相同的状态。
答案 1 :(得分：0)
直接的解决方案是将您的 save() 函数和您的提交按钮（在您的情况下为“编辑”按钮）放在 EditableData 组件中。将提交按钮放在表单中是一种很好的做法。
const EdittableData = () => {
const [selected, setSelected] = useState([]);
const [lookuplist, setaccount2] = React.useState([]);
const [editcontacts, setaccount] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const api=axios.create({baseURL:"https://18.28.238.25/TI/api/v1/contacts/1/"+contactid})
const accountapi=axios.create({baseURL:"https://18.48.28.25/TI/api/v1/account"})
const options = {
headers: {'Authorization': apitoken}
}
//let id = useParams();
console.log(params.id);
React.useEffect(async () => {
const response = await api.get("/",options);
const response2 = await accountapi.get("/",options);
setLoading(false);
}, []);
function save() {
let contactid = editcontacts.id;
const updateapi = axios.create({
baseURL:
"https://108.248.238.235/TiaraDeskAPI/api/v1/contacts/" + contactid
});
let name = editcontacts.contact_name;
let email = editcontacts.email;
let phone = editcontacts.phone;
let address = editcontacts.address;
let city = editcontacts.city;
let state = editcontacts.state;
let country = editcontacts.country;
let pincode = editcontacts.zipcode;
let accountid = selected[0].id;
//const notes = document.getElementById('input-notes').value
const json = {
account: accountid,
contact_name: name,
email: email,
phone: phone,
street: address,
city: city,
state: state,
country: country,
zipcode: pincode
};
console.log(json);
api.post("/", json, options).then(response => {
console.log(response.data.message);
});
}
if (loading) {
return <>Loading...</>;
}
return(
<>
<Form>
<h6 className="heading-small text-muted mb-4">
Contact Information
</h6>
<div className="pl-lg-4">
<Row>
<Col lg="12">
<FormGroup>
<label
className="form-control-label"
htmlFor="input-username"
>
Contact Name
</label>
<Input
className="form-control-alternative"
id="input-username"
placeholder="Username"
type="text"
defaultValue={editcontacts.contact_name}
/>
</FormGroup>
</Col>
</Row>
</div>
<Button color="primary" href="#pablo" onClick={save} size="sm">
Edit
</Button>;
</Form>
</>
)
}