Reactjs 离子反应-预填充型元素

我正在努力使用来自API（即我的DB）的值来预先填充表单元素（数百个使用textarea元素）

在下面的代码中，defaultValue不起作用（我不认为它应该是这样工作的），当我将{item.contact_note}设置为value={}属性时，我的setState不起作用（即每次我键入字母时，textarea都不会更新）

我尝试为map循环中的所有注释设置一个状态数组，以便为每个注释创建一个状态注释，但不起作用（深度问题）

这是我的密码：

import React from 'react';
import {IonContent,  IonPage,IonItem,IonButton,IonLabel,IonTextarea} from '@ionic/react';

type State = {
  items: Array<any>,
  note:string
}
class Test extends React.Component<{},State> { 
  constructor(props:any) {  
    super(props);
    this.state = {
      items: Array<any>(), 
      note: ''
    }  
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event : any) {
    const target = event.target;
    this.setState({note:target.value});
  }
  saveNote(uid_contact: string){
    console.log(this.state.note);
    //Save note -- removed coded for readability
  }
  render(){  
    return ( 
        <IonPage>      
            <IonContent>  
                  {this.state.items.map((item,key) => {
                      return (
                        <>
                          <IonItem>
                              <IonLabel position="stacked">Add a note : </IonLabel>
                              <IonTextarea defaultValue={item.contact_note} value={this.state.note} onIonChange={this.handleChange}></IonTextarea>
                          </IonItem>

                          <IonButton color="primary" expand="block" onClick={() => this.saveNote(item.uid_user)}>Save note</IonButton> 
                        </>    
                      )
                  })}
            </IonContent>  
        </IonPage>
    );
  }
};

export default Test;

从“React”导入React；
从'@ionic/react'导入{IonContent，IonPage，IonItem，IonButton，IonLabel，IonTextarea}；
类型状态={
项目：阵列，
注：字符串
}
类测试扩展了React.Component{
构造函数（props:any）{
超级（道具）；
此.state={
项：数组（），
注意：“”
}  
this.handleChange=this.handleChange.bind（this）；
}
handleChange（事件：任意）{
const target=event.target；
this.setState（{注意：target.value}）；
}
saveNote（uid\u联系人：字符串）{
console.log（this.state.note）；
//保存注释--已删除代码以便于阅读
}
render（）{
报税表（
{this.state.items.map（（项，键）=>{
返回(
添加注释：
this.saveNote（item.uid\u user）}>saveNote
)
})}
);
}
};
导出默认测试；

可能是新手的问题

---

谢谢你的帮助。

我不确定这是否正是你想要的，但试着用“占位符”替换“defaultValue”。这就是我在-{setVariable（（e.target as HTMLInputElement.value）}}}/>之前设置自动填充表单的方式，谢谢@JamesBrightman，但它不起作用。OnOnChange不会更改{val}，因此键入文本区域时不会显示输出。