时间戳

首页 > 解决方案 > React 函数调用和访问变量

javascript - React 函数调用和访问变量

问题描述

我正在尝试在 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

标签： javascriptreactjsreact-native

解决方案

您无法访问外部组件的状态。如果您希望访问组件之外的状态，您可以检查React Context（多个组件的共享状态）。

但是，您可以重新考虑您的方法：如果您能够调用<EdittableData />inside <Viewcontact />，您可以将所有表单的状态和save()函数放入<ViewContact />组件中。然后你可以将你的状态传递给<EdittableData>as props。这样，save()函数和<EdittableData>组件将可以访问相同的状态。

推荐阅读