У меня есть код, в котором я должен выполнить операцию обновления. Я генерирую поля формы динамически на основе результата операции получения. Поля формы заполнены заранее. При изменении события в поле ввода при запуске ошибки 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 правильно отвечает на массив json. Проблема с полем ввода onchange





В функции renderData переменная editData представляет собой массив, поэтому он правильно отображает вашу форму, но в функции inputChangedHandler вы обновляете editData до объекта, следовательно, проблема
Пожалуйста, попробуйте этот фрагмент:
editData! = undefined && editData.map (данные => {});
Все, что я хочу сделать, это обновить событие onchange массива json. соответствующее событие должно измениться
Я нашел решение. Добавление этого кода ниже решило проблему. Мне нужно было добавить индекс с картой, чтобы обновить значение свойства объекта.
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});
}
Можете ли вы попробовать ведение журнала консоли и проверить, что такое
editData, прежде чем вызывать на нем.map. Если это не список, вы получите эту ошибку. Вы также должны проверить ответ api. Если он не возвращается в ожидаемом формате, значит, вы неправильно настроилиeditData.