Question

我在点击记录时尝试渲染更新表单，在点击日期选择器时尝试新记录表单，并且在更新/创建后都没有。我有一个支持，它根据名为editMode的用户输入动态更改其值。

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

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

警告：Create正在更改类型为text的受控输入，使其不受控制。输入元素不应从受控切换到不受控制（反之亦然）。决定在组件的生命周期内使用受控或不受控制的输入元素。

没有错误。

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，在你的情况下你只想迭代数组到检查正确的元素，而不是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。所以在你的情况下它会返回这样的东西：

[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函数中返回任何内容。您应该在map函数中添加return。见下文。

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

渲染中的3个条件视图

2 个答案: