아래에 표시된 것과 같은 양식이 있으며 해당 값이 존재하는 경우 다른 문자열과 연결하여 값을 반환해야합니다. 시맨틱 UI React 구성 요소를 사용하고 있습니다.
<Form.Group widths="equal">
<Form.Select
fluid
id="reqHed"
label="Request Header"
placeholder="Select the Header"
name="reqHeader"
options={config.header}
onChange={(e, { value }) => {
setreqHeader(value);
}}
/>
<Form.Input
fluid
id="headerKey"
label="Name"
placeholder="Name"
onChange={(event) => setHeaderKey(event.target.value)}
/>
<Form.Input
fluid
id="headerValue"
label="Value"
placeholder="Value"
onChange={(event) => setHeaderValue(event.target.value)}
/>
</Form.Group>
이 양식의 OnClick 동안 이러한 값을 상태 변수 (제 경우에는 reqHeader, headerKey 및 headerValue)에 저장하고 POST 작업을 위해 페이로드에 추가했습니다.
const saveHandler = async () => {
return await axios({
method: "POST",
url: config.App_URL.createMock,
headers: {
"content-type": "application/json",
},
data: model,
}).catch((error) => {
console.error(`Error while creating mock => ${error}`);
});
};
아래와 같이 null 검사를 시도했습니다. 이렇게하면 요청을 보낼 때 페이로드에서 reqHeader가 누락됩니다.
React Hooks로 상태를 설정하고 있습니다.
const [reqHeader, setreqHeader] = useState("");
const [headerKey, setHeaderKey] = useState("");
const [headerValue, setHeaderValue] = useState("");
내 페이로드는 다음과 같습니다.
let model = {
emailId: email,
Manager: [
{
appName: app,
heirarchy: "child",
reqHeader: () => {
return reqHeader
? reqHeader + ":" + headerKey + "=" + headerValue
: "";
},
url: url,
},
],
};
값이 null이면 빈 문자열을 반환하고 페이로드에서 언급 한대로 연결 작업을 수행하려면 어떻게 값을 제대로 확인할 수 있습니까?
선택 변경이 잘못 처리됩니다. 따라서 reqHeader를 설정하는 조건은 항상 null입니다.
다음은 코드에서 캡처 한 내용입니다.
// this is wrong, value is undefined
onChange={(e, { value }) => {
setreqHeader(value);
}}
올바른 방법은 이벤트를 객체로 교체 한 다음 대상 및 대상의 값을 구조화하는 것입니다.
/*
1. refactor select field handle change.
2. refactor reqHeader in your model from function to string.
*/
// correct
onChange={({ target: { value } }) => {
setreqHeader(value);
}}
const saveHandler = async () => {
const model = {
emailId: email,
Manager: [{
appName: app,
heirarchy: 'child',
reqHeader: reqHeader ? reqHeader + ':' + headerKey + '=' + headerValue : '',
url: url
}]
}
return axios({
method: 'POST',
url: config.App_URL.createMock,
headers: {
'content-type': 'application/json'
},
data: model
}).catch((error) => {
console.error(`Error while creating mock => ${error}`)
})
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다