如何在反应中更新表列的数据? [英] How to update data for table column in react?

问题描述

我在引导程序中的表有问题.我正在从服务器获取有关时间表的数据.这些数据我保存在状态.接下来我正在创建表.(创建手机和电脑的两种方式，只是改变天和小时的位置).每列都包含组件 SubjectColumn(一列中会有更多数据，如类和主题名称).因此，当我单击此主题列时，我需要使用单击的主题数据打开模态，并且在选择模态中的主题列表后，我必须将主题更改为新的主题.我在我的模态中获得了主题数据，但我不知道如何将它们更改为新的.有什么想法吗?

<预><代码>导出类计划扩展组件{静态上下文类型 = LoggedInuserContext;构造函数(道具){超级(道具)；this.state = {编辑模式:假，openModal:假，时间表:空，modalShow:假，我的主题:空，选定主题:空};this.resize = () =>this.forceUpdate();}changeModalState() {this.setState({modalShow: !this.state.modalShow})}选择主题(主题){this.setState({selectedSubject:subject},this.changeModalState);}componentDidMount() {window.addEventListener('resize', this.resize)this.getTimeTable().then(r =>this.setState({isScheduleLoaded: true}));this.getMySubjects();}componentWillUnmount() {window.removeEventListener('resize', this.resize)}异步 getTimeTable() {如果(this.context == null)返回；const response = await fetch('UserController/GetTimeTable/' + this.context.user.id + '/' + this.context.company + '/' + this.context.role.id);this.setState({schedule: await response.json()});}异步 getMySubjects() {如果(this.context == null)返回；const response = await fetch('SubjectTreeController/GetUserSubjectsList/' + this.context.user.id + '/' + this.context.company + '/' + this.context.role.id);this.setState({mySubjects: await response.json()});}创建内容(){if (!this.state.isScheduleLoaded === true) 返回；让 header_data = [];让 body_data = [];//对于移动其他电脑如果(window.innerWidth <768){//表头this.state.schedule.days.forEach(day => {header_data.push(day.name.substring(0, 2))});//表体for (let i = 0; i {row.other.push(day.slots[i]);});body_data.push(row);}} 别的 {//表头this.state.schedule.days[0].slots.forEach(slot => {header_data.push(slot.order)});//表体this.state.schedule.days.forEach(day => {让行 = {第一列:[],其他: []};row.firstColumn.push(day.name);day.slots.map(slot => row.other.push(slot));body_data.push(row);});}让头 = this.createTableHead(header_data);让 body = this.createRows(body_data);返回 (<><头>{头}</thead>{身体}</tbody></>);}创建表头(数据){返回 (<tr><td></td>{data.map((d, k) => {return (<th key={k} className={"text-center"}> {d} </th>)})}</tr>);}创建行(数据){常量项 = [];for (let i = 0; i < data.length; i++) {常量行 = [];for (让 j = 0; j < data[i].other.length; j++) {if (data[i].other[j].subject !== null) {row.push(<td key={j} className={"text-center "}><SubjectColumn editMode={this.state.editMode}主题={数据[i].其他[j].主题}selectSubject={this.selectSubject.bind(this)}></SubjectColumn></td>);} 别的 {row.push(<td key={j} className={"text-center "}><SubjectColumn editMode={this.state.editMode}主题={空}selectSubject={this.selectSubject.bind(this)}></SubjectColumn></td>);}}项目.推(<tr key={i}><td>{data[i].firstColumn}</td>{排}</tr>);}退换货品;}加载(){if (this.state.schedule === null)返回 (<div className={"d-flex flex-column justify-content-center text-center"}><div><Spinner animation="grow" variant="success"/><Spinner animation="grow" variant="danger"/><Spinner animation="grow" variant="warning"/>

<span>Načítam rozvrh</span>

);}showActionButtons() {常量项 = [];如果(this.state.editMode){items.push(<Button key={"save"} className={"px-4 mx-1"} variant={"success"}onClick={this.startEditing.bind(this)}>Uložiť)}项目.推(<下拉键={"settings"} alignRight><Dropdown.Toggle variant="dark" id="dropdown-basic"><FontAwesomeIcon icon={faCog} size={"lg"}/></Dropdown.Toggle><下拉菜单><Dropdown.Item onClick={this.startEditing.bind(this)}>Edituj rozvrh</Dropdown.Item></Dropdown.Menu></下拉菜单>);退换货品;}开始编辑(){this.setState({editMode: !this.state.editMode});}openScheduleSetting() {console.log("打开");//this.setState({openModal: true});}closeScheduleSetting() {console.log("关闭");//this.setState({openModal: false});}使成为() {返回 (<div className={"w-100"} id="schedule"><div className={"d-flex justify-content-center my-2"}><h3 className={"my-1 text-left flex-grow-1 pl-2"}>Rozvrh hodín</h3>{this.showActionButtons()}

<表格条纹边框悬停>{this.createContent()}</表>{this.loading()}<ScheduleSelectModal subject={this.state.selectedSubject} subjectlist={this.state.mySubjects} show={this.state.modalShow} onHide={this.changeModalState.bind(this)}></ScheduleSelectModal>

);}}

主题列

export class SubjectColumn extends Component {showModalInParrent(){console.log(this.props);this.props.selectSubject(this.props.subject);}创建单元(){让项目 = 空；如果(this.props.editMode){if(this.props.subject === null){return ( <Button className={"w-100 h-100"} onClick={this.showModalInParrent.bind(this)}> </Button>)}项目 = (<片段><Button className={"w-100 h-100"} onClick={this.showModalInParrent.bind(this)}>{this.props.subject.acronym } </Button></片段>);退换货品;} 别的 {if(this.props.subject === null){返回;}返回 (this.props.subject.acronym );}}使成为() {返回 (<div className="w-100 h-100">{this.createCell()}