Javascript 渲染中的3个条件视图

我试图在单击记录时呈现一个更新表单，在单击日期选择器时呈现一个新的记录表单，而在更新/创建之后两者都不呈现。我有一个根据用户输入动态更改其值的道具，称为editMode

这是一个屏幕截图，显示了this.props.editMode在控制台中具有不同值的值，以及this.props.events，以显示它不是空的，甚至数组中的一个对象具有与this.props.editMode找到的记录id相匹配的id

组件将渲染，但组件不会。我只收到控制台里的警告

警告：Create正在将文本类型的受控输入更改为非受控输入。输入元件不应从受控切换到非受控，反之亦然。在组件的使用寿命内，决定使用受控或非受控输入元件

没有错误

import React from 'react';


import Create from './Event/Create';
import Update from './Event/Update';

class SideBar extends React.Component {

  constructor() {
    super();

    this.renderEventForm = this.renderEventForm.bind(this);
  }

  renderEventForm() {

    console.log(this.props.editMode);
    console.log(this.props.events);

    //if editMode state true, loop
    // through events till until matching id
    // place props into update component

    if(this.props.editMode.state) {
      const editRecordId = this.props.editMode.recordId;
      return this.props.events.map((e) => {
        if(e.Id === editRecordId) {
              <div key={e.Id}>
                <Update event={e} />
              </div>
        }
      });
    } else {
      // render the create form
     return(
       <Create/>
     )
   }
  }

  render() {
    return (
      <div className="slds-p-bottom--small slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--1-of-1 slds-large-size--1-of-3">
        {this.renderEventForm()}
      </div>
    );
  }
}

export default SideBar;

---

您没有在.map函数中返回任何内容。您应该在map函数中添加return。见下文

return this.props.events.map((e) => {
  if(e.Id === editRecordId) {
    return (<div key={e.Id}>
      <Update event={e} />
    </div>)
  }
}

你不应该使用map来处理这种情况，当你想为每一个元素返回某个元素时，使用MAP，在这种情况下，你只需要迭代数组来检查正确的元素，而不是使用其他的迭代器来使用返回或中断来中断中间。使用以下命令：

if(this.props.editMode.state) {
    const editRecordId = this.props.editMode.recordId;
    let events = this.props.events;
    for(i in events){
        if(events[i].Id === editRecordId) {
            return <Update event={events[i]} />
        }
    };
}else{
    return(<Create/>)
}