如果道具包含空白数组，则条件渲染答案

【问题标题】：Conditional rendering if a prop contains a blank array如果道具包含空白数组，则条件渲染
【发布时间】：2018-08-26 14:50:42
【问题描述】：

我正在尝试根据其中包含值的数组有条件地渲染。所以基本上如果 this.props.data == [] 不渲染。如果 this.props.data == [{data is here}] 渲染。

我尝试过的事情。

如果道具存在

{this.props.data && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

===仍然渲染===

空

{this.props.data != null && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

===仍然渲染===

长度

{this.props.data.length > 0 && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

===长度未定义===

【问题讨论】：

我不是 React 专家，但我认为这与 this question 类似。 data 似乎不是数组。

标签： reactjs ecmascript-6

【解决方案1】：

你可以试试这个：

{this.props.data && !!this.props.data.length && <Field 
                    label="Data" 
                    name="data" 
                    type="select" 
                    component={SelectComponent}>
                    <option>Select data</option>
                  </Field> }

所以，检查数据是否存在，然后检查它是否不是空数组。

但我建议将其拉出到方法中，因为这样你的渲染方法会很快变得混乱。

【讨论】：

如果length 没有定义，那么它就不是一个数组。
是的，我假设在获取实际数据之前，prop 最初可以是 undefined 或 null，然后它变成一个数组。这就是为什么最初 length 可以是未定义的。
这可行，但如果该字段未呈现，则返回 0。关于删除它的任何想法？
啊，这可以通过将长度转换为布尔值来修复，例如：!!this.props.data.length 或有点冗长，例如Boolean(this.props.data.length)。我会更新答案。
太棒了！当 2 分钟计时器到期时，我将接受答案。感谢您的帮助。