[英]Populate input fields from axios response reactjs
我有简单的领域。 我想根据从 axios 响应中获得的数据填充输入框。 见下图
我正在使用钩子将数据保存到 state。 我的问题是如何在单击获取详细信息按钮(来自 api 的响应)时填充输入框。
见下面的代码
const [data, setData] = useState([])
const [advisoryDetails, setadvisoryDetails] = useState({
ADVISORYID: '',
ADVISORYDESC: '',
CREATEDBY:'',
MODIFIEDBY:'',
STATUS1: ''
})
const [advisoryDetails1, setadvisoryDetails1] = useState([])
const [advisoryID, setadvisoryID] = useState('')
const getAdvisoryTest = async () => {
await axios.post('/API',advisoryID)
.then(response => {
console.log(response.data)
setData(response.data)
console.log('data',data)
setadvisoryDetails1(response.data)
console.log('advisoryDetails1',advisoryDetails1)
alert('success')
})
advisoryDetails1.map(adv => {
advisoryDetails.ADVISORYID = adv.ADVISORYID;
advisoryDetails.ADVISORYDESC = adv.ADVISORYDESC;
advisoryDetails.CREATEDBY = adv.CREATEDBY;
advisoryDetails.MODIFIEDBY = adv.MODIFIEDBY;
if(adv.CREATEDBY && adv.MODIFIEDBY != '')
{
advisoryDetails.STATUS1 = 'Modified'
}
else{ advisoryDetails.STATUS1 = 'New'}
console.log('populate',advisoryDetails)
})
}
const txtAdvIdOnChange = e =>{
setadvisoryID(prevState =>({
...prevState,
'ADVISORYID':e.target.value
}));
console.log('onChange ID:',advisoryID)
}
return(
<div>
<label>AdvisoryID: </label>
<input type='text' placeholder='Advisory ID' className='txtAdvisoryID' onChange={txtAdvIdOnChange} />
<button onClick={()=>getAdvisoryTest()}>Get Details</button>
<br /><br />
<label>Advisory Desc: </label>
<input type='text' placeholder='textbox1' className='txtAdvisoryDesc' value={advisoryDetails&&advisoryDetails.ADVISORYDESC} disabled/>
<br/>
<label>New / Modified: </label>
<input type='text' placeholder='textbox2' className='txtStatus' value={advisoryDetails&&advisoryDetails.STATUS1} disabled/>
</div>)
在那些代码输入框没有填充,即使在console.log 希望你能帮助我,谢谢。
当您单击获取详细信息按钮时,您的 state 没有更新这是问题(仅当 state 更新时值才会更改,否则不会更新)
//before don't do like this
advisoryDetails1.map(adv => {
advisoryDetails.ADVISORYID = adv.ADVISORYID;
advisoryDetails.ADVISORYDESC = adv.ADVISORYDESC;
advisoryDetails.CREATEDBY = adv.CREATEDBY;
advisoryDetails.MODIFIEDBY = adv.MODIFIEDBY;
if(adv.CREATEDBY && adv.MODIFIEDBY != '')
{
advisoryDetails.STATUS1 = 'Modified'
}
else{ advisoryDetails.STATUS1 = 'New'}
console.log('populate',advisoryDetails)
})
//after(only last element of advisoryDetails1 array was updated in the state)
advisoryDetails1.forEach(adv => {
let STATUS1 ='New'
if(adv.CREATEDBY && adv.MODIFIEDBY != '')
{
STATUS1 = 'Modified'
}
setadvisoryDetails({ADVISORYID : adv.ADVISORYID,
ADVISORYDESC:adv.ADVISORYDESC,
CREATEDBY:adv.CREATEDBY,
MODIFIEDBY:adv.MODIFIEDBY,
STATUS1:STATUS1
})
})
如果您想查看您的咨询详情 1 数组中的最后一个元素,请执行以下操作
let adv=advisoryDetails1[advisoryDetails1.length -1];
let STATUS1 ='New'
if(adv.CREATEDBY && adv.MODIFIEDBY != '')
{
STATUS1 = 'Modified'
}
setadvisoryDetails({ADVISORYID : adv.ADVISORYID,
ADVISORYDESC:adv.ADVISORYDESC,
CREATEDBY:adv.CREATEDBY,
MODIFIEDBY:adv.MODIFIEDBY,
STATUS1:STATUS1
})
//it update your advisoryDetails state when advisoryDetails1 changed
useEffect(()=>{
advisoryDetails1.forEach(adv => {
let STATUS1 ='New'
if(adv.CREATEDBY && adv.MODIFIEDBY != '')
{
STATUS1 = 'Modified'
}
setadvisoryDetails({ADVISORYID : adv.ADVISORYID,
ADVISORYDESC:adv.ADVISORYDESC,
CREATEDBY:adv.CREATEDBY,
MODIFIEDBY:adv.MODIFIEDBY,
STATUS1:STATUS1
})
})
},[advisoryDetails1]);
//check whether advisoryDetails is changed or not
useEffect(()=>{
console.log('populate',advisoryDetails)
},[advisoryDetails])
一切都很好,但不像这样只更新了数组的最后一个元素,因此您必须根据您的要求进行一些更改
我认为您可以像下面这样重构您的代码。 我已将 set setadvisoryDetails
移至 axios 的axios
.then()
内,因为您使用的是相同的数据,如果您只想要最后一次迭代的值,则不必通过循环 go 。 并且在输入中,您不必检查advisoryDetails
tails 是否存在或具有非空值,因为您已在const [advisoryDetails, setadvisoryDetails] = useState({...})
中对其进行了初始化
const App = (props) => {
const [data, setData] = useState([])
const [advisoryDetails, setadvisoryDetails] = useState({
ADVISORYID: '',
ADVISORYDESC: '',
CREATEDBY: '',
MODIFIEDBY: '',
STATUS1: ''
})
const [advisoryDetails1, setadvisoryDetails1] = useState([])
const [advisoryID, setadvisoryID] = useState('')
const getAdvisoryTest = () => {
axios.post('/API', advisoryID)
.then(response => {
const respData = response.data;
setData(respData)
setadvisoryDetails1(respData)
console.log({
respData, data, advisoryDetails1
});
alert('success');
if (respData.length > 0) {
const adv = respData[respData.length - 1];
setadvisoryDetails((prevState) => ({
...prevState,
...adv,
STATUS1: adv.CREATEDBY && adv.MODIFIEDBY != '' ? 'Modified' : 'New'
}))
}
})
}
const txtAdvIdOnChange = e => {
setadvisoryID(prevState => ({
...prevState,
'ADVISORYID': e.target.value
}));
console.log('onChange ID:', advisoryID)
}
return (
<div>
<label>AdvisoryID: </label>
<input type='text' placeholder='Advisory ID' className='txtAdvisoryID' onChange={txtAdvIdOnChange} />
{/* If you're just passing a function without any param or event params, then just pass the function name like a variable */}
<button onClick={getAdvisoryTest}>Get Details</button>
<br /><br />
<label>Advisory Desc: </label>
<input type='text' placeholder='textbox1' className='txtAdvisoryDesc' value={advisoryDetails.ADVISORYDESC} disabled />
<br />
<label>New / Modified: </label>
<input type='text' placeholder='textbox2' className='txtStatus' value={advisoryDetails.STATUS1} disabled />
</div>
);
}
在您的输入值属性上,尝试在&&
的任一侧添加一个空格。
<input type='text' placeholder='textbox2' className='txtStatus' value={advisoryDetails.STATUS1 && advisoryDetails.STATUS1} disabled/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.