React JS: onChange Dynami c TextField

Question

Здравствуйте, я только начал изучать реакцию, и я пытаюсь динамически передавать данные из ответа в свой TextField, я сделал это, но кажется, что TextField не редактируется (функция onChange не работает).

Это мои перехватчики состояния:

 const [passParamData, setPassParamData] = useState([]);

Это функция, которую я использую для получения данных из ответа (используя ax ios):

const retrievePassParam = useCallback(() => {
    PasswordMaintenanceService.retrievePassParameter()
      .then((response) => {
        console.log("PasswordMaintenancePage - retrievePassParam response.data >>> " , response.data)
        console.log("PasswordMaintenancePage - retrievePassParam JSON.stringify(response.data) >>> " + JSON.stringify(response.data))
        setPassParamData(response.data);
      }).catch((err) => {
        console.log("PasswordMaintenancePage - retrievePassParam catch >>> " + err)
      })
    });

Код ниже это то место, где я передаю данные из ответа в динамический c TextField

 {
        passParamData.map(({paramID,value, index}) =>{
        return(
          <div key={paramID}>                       
          <TextField       
            label={paramID} 
            variant="outlined" 
            value={value} 
            onChange={event => {handleTextChange(paramID)}}
          />               
          </div>
       )             
       })
     }

Это моя функция onChange:

 const handleTextChange = useCallback((paramID, event) =>{

const inputVal = [ ...passParamData];
inputVal[paramID] = event.target.value;
setPassParamData(inputVal)

});

Are есть ли другие способы сделать текстовое поле Dynami c редактируемым? Я действительно застрял в этом, любая помощь будет очень признательна. Заранее спасибо!

Answer 1

Причина, по которой ваш onChange не работает, заключается в том, что вы передаете только один параметр своей функции и получаете 2 в функции.

<TextField       
  label={paramID} 
  variant="outlined" 
  value={value} 
  onChange={handleTextChange(paramID)}
/> 

, а затем вы можете получить его в handleTextChange как двойное стрелочная функция.

const handleTextChange = (paramID) => (event) => {
  const inputVal = passParamData.map((p) => {
                               if(p.id === paramID) {
                                  return {
                                     ...p,
                                     value: e.currentTarget.value
                                  }
                               }
                               return p;
                           });
  setPassParamData(inputVal)
};

Кроме того, вы используете useCallback, но не имеете никакой зависимости. Попробуйте указать все зависимости в useCallback или удалить все вместе.

const handleTextChange = useCallback((paramID) => (event) => {
  const inputVal = passParamData.map((p) => {
                               if(p.id === paramID) {
                                  return {
                                     ...p,
                                     value: e.currentTarget.value
                                  }
                               }
                               return p;
                           })
  setPassParamData(inputVal)
}, [passParamData]);