从axios响应reactjs填充输入字段

Rymrk 发表于 Dev

林克

我有简单的领域。我想根据从axios响应获得的数据填充输入框。见下图

我正在使用挂钩，以将数据保存到状态。我的问题是，单击获取详细信息按钮后如何填充输入框（来自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中也没有填充输入框，希望您能帮助我谢谢您。

HaseebA

我认为您可以像下面那样重构代码。我将setsetadvisoryDetails移到的范围之内.then()，axios因为您使用的是相同的数据，并且只需要最后一次迭代的值就不必遍历循环。在输入中，您不必检查是否advisoryDetails存在或具有非空值，因为您已在其中将其初始化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>
  );
}