渲染中的 3 个条件视图答案

【问题标题】：3 conditional views in render渲染中的 3 个条件视图
【发布时间】：2017-02-20 09:58:51
【问题描述】：

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

这里是 this.props.editMode 从控制台获得的具有不同值的屏幕截图，除了 this.props.events 以显示它不是空的，甚至数组中的一个对象具有与 recordId 匹配的 id 找到它this.props.editMode

<Create /> 组件将呈现，但 <Update /> 组件不会。我只是在控制台中收到警告。

警告：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;

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

你不应该在这种情况下使用map，map 用于当你想为每个元素return 一些东西时，在你的情况下你只想迭代数组来检查正确的元素，而不是地图使用其他迭代器，您可以使用return 或break 在中间中断。使用这个：

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/>)
}

如果你不返回任何东西，那么它会默认返回 undefined。因此，在您的情况下，它将返回如下内容：

[undefined, **some element** , undefined, undefined]

检查一下：

a = [1,2,3,4,5,6];
b = a.map((e)=>{
         if(e % 2 == 0)
             return e;
    });
    
console.log(b);

【讨论】：

【解决方案2】：

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

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

【讨论】：