爲什麼我的反應組件不呈現？

這是我的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，數組或其它一些。無效的對象「。

來源

2017-04-15 Utkarsh Prakash

你沒有渲染任何東西，地圖幾乎斷開連接，返回你的地圖可以做到這一點，但你可能還需要一個父元素 – 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())

來源

2017-04-15 08:24:19

這是*一個*問題。有兩個（可以說是三個）。 :-) –

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

來源

2017-04-15 08:30:37

爲什麼我的反應組件不呈現？

回答

相關問題