Fatal编程技术网
  • javascript/
  • Javascript React函数调用和访问变量

Javascript React函数调用和访问变量

javascript reactjs react-native

Javascript React函数调用和访问变量,javascript,reactjs,react-native,Javascript,Reactjs,React Native,我试图访问React中函数之外的状态 我所要做的就是点击save，我需要获得表单中的所有详细信息并通过API提交 下面是我的完整代码，我只删除了导入的组件详细信息 我们需要的是，当单击save时，表单应该通过API调用提交 这是我的密码： ** function save() { let contactid=editcontacts.id; const updateapi=axios.create({baseURL:"https://108.248.238.235/TiaraD

我试图访问React中函数之外的状态

我所要做的就是点击save，我需要获得表单中的所有详细信息并通过API提交

下面是我的完整代码，我只删除了导入的组件详细信息

我们需要的是，当单击save时，表单应该通过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

**
函数save（）{
让contactid=editcontacts.id；
const updateapi=axios.create（{baseURL:“https://108.248.238.235/TiaraDeskAPI/api/v1/contacts/“+contactid}）
让name=editcontacts.contact\u name
让email=editcontacts.email
let phone=editcontacts.phone
let address=editcontacts.address
让city=editcontacts.city
让state=editcontacts.state
让country=editcontacts.country
让pincode=editcontacts.zipcode
让accountid=所选[0]。id；
//const notes=document.getElementById（'input-notes'）。值
const json={“account”：accountid，“contact_name”：name，“email”：email，“phone”：phone，“street”：address，“city”：city，“state”：state，“country”：country，“zipcode”：pincode}；
log（json）；
api.post（“/”，json，options）。然后（响应=>{
console.log（response.data.message）；
})
}
**
常量EdittableData=（）=>{
const[selected，setSelected]=useState（[]）；
const[lookuplist，setaccount2]=React.useState（[]）；
const[editcontacts，setaccount]=React.useState（[]）；
常量[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"})
常量选项={
标头：{'Authorization'：apitoken}
}
//设id=useParams（）；
控制台日志（参数id）；
React.useffect（异步（）=>{
const response=wait api.get（“/”，选项）；
const response2=等待accountapi.get（“/”，选项）；
设置加载（假）；
}, []); 
如果（装载）{
返回装载。。。；
}    
返回(
联系方式
联系人姓名
) 
}
const Viewcontact=（）=>{
返回(
{/*页面内容*/}
***************
编辑
*****************
)};
导出默认Viewcontact；
```
我试图调用函数save in react并访问状态，但失败，
错误是，我不能访问任何状态或变量，你能帮我吗
提前谢谢
您无法访问外部组件的状态。如果希望访问组件外部的状态，可以选中（多个组件的共享状态）

但是，您可以重新考虑您的方法：如果您能够在
中调用
，您可以将所有表单的状态和
save（）
函数放在
组件中。然后，您可以将您的状态作为
道具
传递给
。这样，
save（）
函数和
组件将可以访问相同的状态。

简单的解决方案是将
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>
    
    </>
  ) 
 }

const EdittableData=（）=>{
const[selected，setSelected]=useState（[]）；
const[lookuplist，setaccount2]=React.useState（[]）；
const[editcontacts，setaccount]=React.useState（[]）；
常量[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"})
常量选项={
标头：{'Authorization'：apitoken}
}
//设id=useParams（）；
控制台日志（参数id）；
React.useffect（异步（）=>{
const response=wait api.get（“/”，选项）；
const response2=等待accountapi.get（“/”，选项）；
设置加载（假）；
}, []); 
函数save（）{
让contactid=editcontacts.id；
const updateapi=axios.create({
基本URL：
"https://108.248.238.235/TiaraDeskAPI/api/v1/contacts/“+联系人ID
});
让name=editcontacts.contact\u name；
让email=editcontacts.email；
let phone=editcontacts.phone；
让address=editcontacts.address；
让city=editcontacts.city；
让state=editcontacts.state；
让country=editcontacts.country；
让pincode=editcontacts.zipcode；
让accountid=所选[0]。id；
//const notes=document.getElementById（'input-notes'）。值
常量json={
账号：accountid，
联系人姓名：姓名，
电邮:电邮,，
电话:电话,，
街道：地址：，
城市:城市,，
州:州,，
国家:国家,，
zipcode:pincode
};
log（json）；
api.post（“/”，json，options）。然后（响应=>{
console.log（response.data.message）；
});
}
如果（装载）{
返回装载。。。；
}    
返回(
联系方式
联系人姓名