为什么我的React组件没有渲染？

Question

这是我的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>)
         }

    })  

}

我收到此错误：

“必须返回有效的React元素（或null）。您可能返回了未定义，数组或其他无效对象。”

Answer 1

有两个，三个甚至四个问题：

1. 您不会从函数中返回任何内容，因为尚未返回 map的结果。

2. React组件必须返回单个元素或null ，它不能返回数组。

3. 在map回调中，如果input.type为"textInput"或"selectInput" ，则仅返回某些内容，而不是其他值。 这将在结果数组中留下undefined值。 如果只有两个可能的值， else if(input.type == "selectInput"){更改为} else { 。 如果不是，请处理其他情况。

4. floatingLabel在Textfield的开始标记似乎很奇怪，这将是一个独立的布尔属性。

因此，您可能希望将这些元素包装在某些东西中，也许是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> 

Answer 2

在map内部，您将返回元素，这些元素将按map分组为一个array （返回一个array ），您还需要return map的结果。 您正在返回数组，但是react组件无法返回数组，因此将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())