3 условных представления в рендере

Question

Я пытаюсь отобразить форму для обновления при нажатии записи, новой форме записи при нажатии на кнопку выбора даты и ни после обновления, ни создания. У меня есть поддержка, которая динамически меняет свои значения на основе пользовательского ввода, который называется editMode.

Вот скриншот того, что значения this.props.editMode имеет из консоли с различными значениями, в дополнение к this.props.events, чтобы показать, что это не пустая и даже один объект в массиве имеет соответствующий идентификатор к recordId нашел его 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; 

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

Answer 2

Вы ничего не возвращаете в своей функции .map. Вы должны добавить возврат внутри функции карты. Смотри ниже.

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