javascript - 渲染中的 3 个条件 View

Question

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

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

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

Warning: Create is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

没有错误。

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如果您只想迭代数组以检查正确的元素，而不是使用 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 ，如果你不返回任何内容，那么默认情况下它将返回未定义。因此，在您的情况下，它将返回如下内容:

[未定义，**某些元素**，未定义，未定义]

检查一下:

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