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）。您可以拥有返回undefined，数组或其他一些无效对象。“

Answer 1

有两个，三个，可能有四个问题：

您没有从函数中返回任何内容，因为您没有返回 map的结果。
React组件必须返回单个元素或null，它不能返回数组。
在map回调中，如果input.type为"textInput"或"selectInput"，您只会返回一些内容，而不是其他内容。这会在结果数组中留下undefined个值。如果这些是唯一两个可能的值，请将else if(input.type == "selectInput"){更改为} else {。如果没有，请处理其他案件。

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

使用此：

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

另一个问题是，在map内，如果你没有默认返回任何内容，它将返回undefined，你正在使用两个条件，如果它们都不是{{} 1}}，在这种情况下将返回true。因此，请始终使用undefined案例，以这种方式使用它：

default

检查此示例：

＆＃13;

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

＆＃13;

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

2 个答案: