如何在React中使用.join()如果数组最初不存在

Question

我有一个功能反应组件,在api请求后显示信息.最初它显示的对象是空白的,因为尚未提出请求.在该对象中是一个如下所示的数组:

['US', 'USA', 'United States of America']

当我只是显示数组时,在api请求之后,它在页面上显示为单个字符串,ex之间没有空格:

USUSAUnited States of America

当然,我想用.join(',')来格式化它,以格式化美国,美国,美国等字符串,但在我添加.join(',')后,它会抛出一个错误:

TypeError: props.modalCountry.alt_spellings is undefined

似乎.join()试图在有一个实际的modalCountry对象之前在第一个渲染上运行.在对象和数组实际存在之前,如何让此方法不运行？

Answer 1

在React - Booleans中,Null和Undefined被忽略,因此您可以返回null或者undefined如果数组不存在.另一种选择是提供默认数组.

选项1 - 如果阵列尚不存在,请使用短路评估跳过array.join():

const Component = ({ arr = [] }) => (
    <div>
        {arr && arr.join()}
    </div>
);

选项2 - null如果没有数组则渲染:

const Component = ({ arr = [] }) => (
    <div>
        {arr ? arr.join() : null}
    </div>
);

选项3 - 提供默认数组作为值:

const Component = ({ arr = [] }) => (
    <div>
        {arr.join()}
    </div>
);