为什么我的反应组件不呈现？

问题描述：

这是我的react functional component，我发送输入为props，这些输入将被显示，然后循环输入以检查根据条件显示哪些输入。这是我的组件： -为什么我的反应组件不呈现？

const TopInputComponent = (props) => { 
    const inputs = props.inputs; 
    inputs.map((input,index)=>{ 
     if(input.type == "textInput"){ 
      return (<Textfield key={index} 
        onKeyDown={(event)=>{ 
         if(event.key == "Enter"){ 
          onFilterSelected({'min_price':parseInt(event.target.value)}); 
         } 
        }} 
        label={input.placeholder} 
        floatingLabel 
       />) 
     }else if(input.type == "selectInput"){ 
       return (<div key={index}> 
         <label>{input.placeholder}</label> 
         <select > 
          <option value="1">1</option> 
          <option value="2">3</option> 
          <option value="4">4</option> 
          <option value="5">5</option> 
         </select> 
        </div>) 
     } 

    }) 

}

我收到此错误：

“一个有效的做出反应元素（或空）必须返回你可能有返回undefined，数组或其它一些。无效的对象“。

你没有渲染任何东西，地图几乎断开连接，返回你的地图可以做到这一点，但你可能还需要一个父元素 – Icepickle

答

内map要返回的元素，这元素将归入一个array通过map（返回array），你需要return的map也是结果。您正在返回一个数组，但反应组件不能返回数组，因此将map结果包含在div中。

使用此：

const TopInputComponent = (props) => { 
    const inputs = props.inputs; 
    return <div> { inputs.map((input,index)=>{ //added return 
    ....

还有一个问题是，里面map如果你不回默认任何它会返回undefined，使用两个条件，可能是可能的，如果他们都不是true ，那么undefined将被退回。因此请务必使用一个default情况下，也以这种方式来使用它：

return a.map(el => { 
    if(/*condition 1*/) 
     return //1; 
    else if(/*condition 2*/) 
     return //2; 
    else 
     return //3; 
})

检查这个例子：

a = [1,2,3,4,5,6]; 
 

 
function withoutReturn() { a.map(i => i); }; 
 

 
function withReturn() { return a.map(i => i); }; 
 

 
console.log('withoutReturn', withoutReturn()); 
 

 
console.log('withReturn', withReturn())

这是*一个*问题。有两个（可以说是三个）。 :-) –

@ T.J.Crowder谢谢你指出，并补充说，在答案:) –

这不是我的意思。我的意思是一个（返回一个数组），这将使它不工作... :-)在这一点上，我不建议增加它，因为已经有一个答案突出了所有这些问题。 –

答

有两个，三个，可能是四个方面的问题：

你没有返回任何东西功能，因为你没有返回结果map。
React组件必须返回一个单个元素元素或null，它不能返回数组。
在您map回调，你只返回东西，如果input.type是"textInput"或"selectInput"，不如果是别的东西。这会在结果数组中留下undefined值。如果这些是只有两个可能的值，请将else if(input.type == "selectInput"){更改为} else {。如果不是，则处理其他情况。
floatingLabelTextfield的开始标记看起来很奇怪，它将是一个独立的布尔属性。

所以，你可能会想换的东西的那些元素，也许是div（见***线）：

const TopInputComponent = (props) => { 
    const inputs = props.inputs; 
    return <div>{inputs.map((input,index)=>{  // *** 
     if(input.type == "textInput"){ 
      return (<Textfield key={index} 
        onKeyDown={(event)=>{ 
         if(event.key == "Enter"){ 
          onFilterSelected({'min_price':parseInt(event.target.value)}); 
         } 
        }} 
        label={input.placeholder} 
        floatingLabel 
       />) 
     } else { // *** Removed: if(input.type == "selectInput"){ 
       return (<div key={index}> 
         <label>{input.placeholder}</label> 
         <select > 
          <option value="1">1</option> 
          <option value="2">3</option> 
          <option value="4">4</option> 
          <option value="5">5</option> 
         </select> 
        </div>) 
     } 
    })}</div>;         // *** 
}

简体活生生的例子：

const MyComponent = props => { 
 
    const {inputs} = props; 
 
    return <div> 
 
     {inputs.map((input, index) => <input key={index} type={input.type} name={input.name} value={input.value || ''} />)} 
 
     </div>; 
 
}; 
 

 
ReactDOM.render(
 
    <MyComponent inputs={[ 
 
      {type: "text", name: "one"}, 
 
      {type: "button", name: "btn", value: "Click me"} 
 
     ]} />, 
 
    document.getElementById("react") 
 
);

<div id="react"></div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

为什么我的反应组件不呈现？

相关推荐