Javascript 如果数组不'；最初不存在

我有一个功能性的react组件，它在api请求后显示信息。最初显示的对象为空，因为尚未发出请求。对象中有一个数组，如下所示：

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

当我简单地显示数组时，在api请求之后，它在页面上显示为单个字符串，在ex:

USUSAUnited States of America

当然，我想使用.join（“，”）对其进行格式化，以便像US、USA、美利坚合众国那样格式化字符串，但在添加.join（“，”）后，它会抛出一个错误：

TypeError: props.modalCountry.alt_spellings is undefined

似乎.join（）正在尝试在出现实际的modalCountry对象之前在第一个渲染上运行。如何使此方法在对象和数组实际存在之前不运行

在React-中，因此如果数组不存在，可以返回

null

或

undefined

。另一个选项是提供默认数组

选项1-如果阵列尚不存在，则用于跳过

阵列.join（）

：

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

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

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

const Component=（{arr=[]}）=>(
{arr.join（）}
);

在React-，因此如果数组不存在，可以返回

null

或

未定义的

。另一个选项是提供默认数组

选项1-如果阵列尚不存在，则用于跳过

阵列.join（）

：

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

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

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

const Component=（{arr=[]}）=>(
{arr.join（）}
);

我们可能需要更多的代码来解决这个问题。我们看不到你实际上在做什么。@CalebH。我的代码实际上是一个返回{props.modalCountry.alt_拼写}但与{props.modalCountry.alt_拼写.join（'，'）}断开的函数react组件是的，但是如何加载alt_拼写？正如Ori Drori所解释的，您可以在功能组件本身内进行检查，以确保没有对未定义的对象调用函数，或者可以对父组件中的响应数据进行一些数据清理，以确保至少传递了一个数组。您甚至还可以在功能组件上使用PropTypes，以确保您没有在非数组对象上调用数组函数（即，

join

），这将同样严重或更糟地失败。modalCountry是否来自redux存储？为什么不设置一个默认的空数组呢？我们可能需要更多的代码来解决这个问题。我们看不到你实际上在做什么。@CalebH。我的代码实际上是一个返回{props.modalCountry.alt_拼写}但与{props.modalCountry.alt_拼写.join（'，'）}断开的函数react组件是的，但是如何加载alt_拼写？正如Ori Drori所解释的，您可以在功能组件本身内进行检查，以确保没有对未定义的对象调用函数，或者可以对父组件中的响应数据进行一些数据清理，以确保至少传递了一个数组。您甚至还可以在功能组件上使用PropTypes，以确保您没有在非数组对象上调用数组函数（即，

join

），这将同样严重或更糟地失败。modalCountry是否来自redux存储？为什么不设置一个默认的空数组呢？没有更优雅的解决方案了吗？这似乎有点像黑客——这些都是解决一个简单问题的简单方法。然而，未来是这样的。彼得，这一点也不奇怪。您有一个未初始化的变量。您需要解决这个问题。@OriDrori短路评估是最好的，但不幸的是，如果没有阵列，将永远无法访问此组件。没有更优雅的解决方案吗？这似乎有点像黑客——这些都是解决一个简单问题的简单方法。然而，未来是这样的。彼得，这一点也不奇怪。您有一个未初始化的变量。您需要设法解决这个问题。@OriDrori短路评估是最好的，但不幸的是，如果没有阵列，将永远无法访问此组件。