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渲染條件視圖

回答

相關問題