Javascript 从axios response reactjs填充输入字段

我有简单的字段。我想根据从axios response获得的数据填充输入框。见下图

我使用钩子，将数据保存到状态。 我的问题是如何在单击GetDetails按钮（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>)

const[data，setData]=useState（[]
const[advisoryDetails，setadvisoryDetails]=useState({
ADVISORYID:“”，
ADVISORYDESC:“”，
由“”创建，
修改为：“”，
状态1:“”
})
const[advisoryDetails1，setadvisoryDetails1]=useState（[]
const[advisoryID，setadvisoryID]=useState（“”）
const getAdvisoryTest=async（）=>{
等待axios.post（'/API'，advisoryID）
。然后（响应=>{
console.log（response.data）
setData（response.data）
console.log（'data'，data）
setadvisoryDetails1（response.data）
console.log（'advisoryDetails1'，advisoryDetails1）
警报（“成功”）
})
advisoryDetails1.map（adv=>{
advisoryDetails.ADVISORYID=adv.ADVISORYID；
ADVISORYDESC=adv.ADVISORYDESC；
advisoryDetails.CREATEDBY=adv.CREATEDBY；
advisoryDetails.MODIFIEDBY=adv.MODIFIEDBY；
如果（adv.CREATEDBY&&adv.MODIFIEDBY！=''）
{
advisoryDetails.STATUS1='Modified'
}
else{advisoryDetails.STATUS1='New'}
console.log（'populate'，advisoryDetails）
})
}
const txtAdvIdOnChange=e=>{
setadvisoryID（prevState=>({
…国家，
“ADVISORYID”：e.target.value
}));
console.log（'onChange ID:'，advisoryID）
}
返回(
忠告：
getAdvisoryTest（）}>获取详细信息



咨询说明：


新的/修改的：
)

在这些代码上，即使在console.log中，也没有填充输入框

---

希望您能帮助我，谢谢。

请尝试在输入值属性的

&&

两侧添加空格

<input type='text' placeholder='textbox2' className='txtStatus' value={advisoryDetails.STATUS1 && advisoryDetails.STATUS1} disabled/>

---

当您单击“获取详细信息”按钮时，您的状态未更新，这是问题所在（值仅在状态更新时更改，否则不会更新）

如果要查看advisoryDetails1数组中的最后一个元素，请执行以下操作

 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的
中。然后（）
，因为您使用的是相同的数据，如果您只需要最后一次迭代的值，就不必经过循环。在输入中，您不必检查
advisoryDetails
是否存在或是否具有非空值，因为您已在
const[advisorydails，setadvisorydails]=useState（{…}）

const-App=（道具）=>{
const[data，setData]=useState（[]）
const[advisoryDetails，setadvisoryDetails]=useState({
ADVISORYID:“”，
ADVISORYDESC:“”，
由“”创建，
修改为：“”，
状态1:“”
})
const[advisoryDetails1，setadvisoryDetails1]=useState（[]
const[advisoryID，setadvisoryID]=useState（“”）
const getAdvisoryTest=（）=>{
axios.post（'/API'，advisoryID）
。然后（响应=>{
const respData=response.data；
setData（respData）
setadvisoryDetails1（respData）
console.log({
响应数据、数据、咨询详情1
});
警惕（“成功”）；
如果（respData.length>0）{
const adv=respData[respData.length-1]；
setadvisoryDetails（（prevState）=>({
…国家，
副词。
状态1:adv.CREATEDBY&&adv.MODIFIEDBY！='''Modified'：'New'
}))
}
})
}
const txtAdvIdOnChange=e=>{
setadvisoryID（prevState=>({
…国家，
“ADVISORYID”：e.target.value
}));
console.log（'onChange ID:'，advisoryID）
}
返回(
忠告：
{/*如果只是传递一个没有任何参数或事件参数的函数，那么只需像传递变量一样传递函数名*/}
获取详细信息



咨询说明：


新的/修改的：
);
}
为什么有
advisoryDetails.STATUS1='Modified'
？使用
setadvisoryDetails
更新状态，如下所示：
setadvisoryDetails（prevState=>（{…prevState，STATUS1:“Modified”}））
并且您知道，由于您正在处理数组
advisoryDetails1
，它只是将数据覆盖到
advisoryDetails
，您将看到最后一次迭代的values@HaseebA哦，是的，呵呵，我的错。但是，如果您正在将
response.data
设置为
advisorydails1
为什么不使用response的数据来更新它，因为它可能的
advisorydails1
在此时没有更新const respData=response.data；如果（respData.length>0）{const adv=respData[respData.length-1]；setadvisoryDetails（（prevState）=>（{…prevState，…adv，STATUS1:adv.CREATEDBY&&adv.MODIFIEDBY！=''Modified'：'New'}）}```你好@HaseebA，你能发布你的答案吗，这样我就可以把它标记为正确的答案？感谢您在使用您的第二套代码时@baskaran ajiharan@hi//after comment下的代码。advisoryDetails在第一次单击时还并没有填充数据（我通过console.log进行了检查）。我想在单击按钮后立即填充advisoryDetails，以便我立即使用它并填充输入框。谢谢，我确保axios响应只返回一组数据。我只是更新了我的答案，您可以重新检查吗？您不能直接使用console.log语句进行检查，因为它是异步的。只能使用render方法进行检查
 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])

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>
  );
}