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

Question

我有一个功能性的react组件，它在api请求后显示信息。最初，它显示的对象是空白的，因为还没有发出请求。对象中有一个数组，看起来像这样：

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

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

USUSAUnited States of America

当然，我想用.join('，'(来格式化字符串，就像US，USA，United States of America一样，但在我添加了.join后，它会抛出一个错误：

TypeError: props.modalCountry.alt_spellings is undefined

join((似乎试图在出现实际的modalCountry对象之前在第一次渲染时运行。如何使此方法在对象&数组是否真的存在？

Answer 1

在React中，布尔值、Null和未定义值被忽略，因此如果数组不存在，则可以返回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>
);