Как обновить динамически сгенерированную форму в React JS

У меня есть код, в котором я должен выполнить операцию обновления. Я генерирую поля формы динамически на основе результата операции получения. Поля формы заполнены заранее. При изменении события в поле ввода при запуске ошибки data.map не является функцией при нажатии клавиши. Я могу изменить отдельные поля с разными именами. Но не удалось обновить состояние массива json. Пожалуйста помоги. Я прикрепил фрагмент кода ниже.

export default class PocDetail extends React.Component {
 constructor(props) {
  super(props);
   this.state = {
     isLoading:true,
     editData:[],
   };
 }


 componentDidMount(){
   this.renderData();
 }

 renderData(){
  var self = this;
  const getOrgId = 
  window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
  const url = "some api";
  get(url+"Organisation/"+getOrgId+"/pointOfContacts/").then(function (response) {
   console.info(response.data);
   self.setState({
     editData:response.data,
     isLoading:false
   })
 }).catch(function (error) {
    console.info(error);
   });
 }

 putData =(e)=>{
    e.preventDefault();
 }


//edit permission for input fields
  inputChangedHandler = (event) => {
  this.setState({ editData: { ...this.state.editData,[event.target.name]:event.target.value} });
  // May be call for search result
  }


 //the view
 render() {
   const {isLoading,editData} = this.state;
   if (isLoading){
    return <Loader />;
   }
   return (
    <div>
     <Row style = {{paddingTop:'20px',paddingBottom:'40px',marginLeft:'auto',marginRight:'auto'}}>
        <Col lg = "8" md = "8" sm = "8">
          <Form id = "bankForm" onSubmit = {this.putData}>
            <ToastContainer store = {ToastStore}/>
            {
              editData.map(data=>{
              return(<Row key = {data.id}>
                <Col lg = "6" md = "6" sm = "6">
                  <FormGroup>
                    <Label className = "createLabelStyle" for = "title">Title</Label>
                    <Input className = "createInputStyle" type = "text" name = "title" id = "title" autoComplete = "off" value = {data.title} onChange = {(event)=>this.inputChangedHandler(event)} required/>
                  </FormGroup>
                  <FormGroup>
                    <Label className = "createLabelStyle" for = "first_name">First name</Label>
                    <Input className = "createInputStyle" type = "text" name = "first_name" id = "first_name" value = {data.first_name} onChange = {(event)=>this.inputChangedHandler(event)} autoComplete = "off" required/>
                  </FormGroup>
                  <FormGroup>
                    <Label className = "createLabelStyle" for = "contact_number">Contact Number</Label>
                    <Input className = "createInputStyle" type = "text" name = "contact_number" id = "contact_number" autoComplete = "off" value = {(data.contact_number==null)?"":data.contact_number} onChange = {(event)=>this.inputChangedHandler(event)} required/>
                  </FormGroup>
                </Col>
                <Col lg = "6" md = "6" sm = "6">
                  <FormGroup>
                    <Label className = "createLabelStyle" for = "email">Email ID</Label>
                    <Input className = "createInputStyle" type = "text" name = "email" value = {data.email} onChange = {(event)=>this.inputChangedHandler(event)} id = "email"  autoComplete = "off" required/>
                  </FormGroup>
                  <FormGroup>
                    <Label className = "createLabelStyle" for = "last_name">Last name</Label>
                     <Input className = "createInputStyle" type = "text" name = "last_name" value = {data.last_name} onChange = {(event)=>this.inputChangedHandler(event)} id = "last_name"  autoComplete = "off" required/>
                   </FormGroup>
                 </Col>
             </Row>);
               })
             }
             <Button className = "createSubmitStyle">Add</Button>{' '}
             <Button className = "createSubmitStyle">Update</Button>
           </Form>
         </Col>
     </Row>
   </div>
  );
 }
}

Можете ли вы попробовать ведение журнала консоли и проверить, что такое editData, прежде чем вызывать на нем .map. Если это не список, вы получите эту ошибку. Вы также должны проверить ответ api. Если он не возвращается в ожидаемом формате, значит, вы неправильно настроили editData.

suryasankar 01.10.2018 09:05

editdata правильно отвечает на массив json. Проблема с полем ввода onchange

Sriharsha K 01.10.2018 09:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
2
58
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

В функции renderData переменная editData представляет собой массив, поэтому он правильно отображает вашу форму, но в функции inputChangedHandler вы обновляете editData до объекта, следовательно, проблема

Пожалуйста, попробуйте этот фрагмент:

editData! = undefined && editData.map (данные => {});

Все, что я хочу сделать, это обновить событие onchange массива json. соответствующее событие должно измениться

Sriharsha K 01.10.2018 11:17
Ответ принят как подходящий

Я нашел решение. Добавление этого кода ниже решило проблему. Мне нужно было добавить индекс с картой, чтобы обновить значение свойства объекта.

  inputChangedHandler(i,event){
    let data = [...this.state.editData];
    data[i][event.target.name] = event.target.value;
    console.info(data[i][event.target.name]);
    this.setState({editData:data});
  }

Другие вопросы по теме