レンダリングで3つの条件ビュー

Question

レコードをクリックするときに更新フォームを表示しようとしています。日付ピッカーがクリックされたときに新しいレコードフォームが表示され、更新/作成の後も表示されません。 editModeというユーザー入力に基づいて値を動的に変更する小道具があります。ここ

は this.props.editModeは、それが空でない表示する this.props.eventsに加えて、異なる値を有するコンソールからいる値と recordIdはそれを this.props.editMode

を発見するために、アレイにも1つの目的は、一致するIDを有するもののスクリーンショットであります

<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; 

Answer 1

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

mapを使用すると、何も返さない場合、デフォルトでは未定義が返されます。これをチェックし

[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);

をだからあなたのケースでは、このようなものを返します。

Answer 2

.map機能で何も返されません。マップ関数の中にreturnを追加する必要があります。下記参照。あなたは各要素のreturn何かしたいときは、例、この種のmapを使用してはならない

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