3渲染条件视图

我试图单击记录时提交更新表单，单击日期选择器时的新记录表单以及更新/创建后都没有。我有一个道具，根据名为editMode的用户输入动态更改其值。3渲染条件视图

这里是一个什么样的价值观this.props.editMode已经从不同的价值观控制台，除了this.props.events显示它不是空的，数组中甚至一个对象有一个匹配的ID为recordId发现this.props.editMode

截图

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

警告：创建正在改变受控输入的类型文本是不受控制的。输入元素不应该从受控状态切换到非受控状态（反之亦然）。决定在组件的使用期限内使用受控或不受控制的输入元素。

没有错误。

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;

来源

2017-02-20 Tyler Zika

你不应该为这种情况下使用map，当你想return东西对每个元素map时，你的情况，你只想遍历数组检查正确的元素，而不是地图使用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, **some element** , undefined, undefined]

检查：

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

来源

2017-02-20 10:15:12

你是不是在你的.map函数返回任何东西。您应该在地图功能中添加返回。见下文。

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

来源

2017-02-20 10:10:49

3渲染条件视图

回答

相关问题