有没有比添加 || 更好的解决方案 [ ] 在 ES6 中检查 null 的每个字段

Question

I am working with a child component where an array item is passed as prop. However, that item also contains another array where there should be null and undefined check before rendering. Adding || [] || [] to each filed didn't seem the best way. Is there a better way that I am missing?

const ChildComponent= ({ newsItem, textColor, newsItemHeadingColor }) => {
  const imageFormats = newsItem?.itemImage?.formats;
  const imageSrc = useProgressiveImage({ formats: imageFormats });
  const history = useHistory();

  const { state } = useContextState();
  const { schemeMode, colorSchemes } = state;

  const { itemTagColor, itemTagTextColor } = getThemeColors({
    schemeMode,
    colorSchemes,
    colors: {
      itemTagColor: newsItem?.itemTagColor?.name,
      itemTagTextColor: newsItem?.itemTagTextColor?.name,
    },
  });

  return (
    <NewsItem
      onClick={() => {
        const url =
          newsItem?.itemTag === 'Lab'
            ? getPageLink({
                page: newsItem?.itemLink || [], <<<<<< this check
              })
            : newsItem?.itemLink || []; <<<<<< this check
        url && history.push(url);
      }}
    >
      <ImageContainer>
        <Image src={imageSrc} alt={`${newsItem?.itemImage || []}`} /> <<<<<< this check
      </ImageContainer>
      <NewsItemTag color={itemTagColor} itemTagTextColor={itemTagTextColor}>
        <Body4>{`${newsItem?.itemTag || []}`}</Body4>               <<<<<< this check
      </NewsItemTag>
      <NewsItemName newsItemHeadingColor={newsItemHeadingColor}>{`${
        newsItem?.itemTitle || []                                     <<<<<< this check
      }`}</NewsItemName>
      <Description textColor={textColor}>{`${
        (newsItem.description &&
          newsItem?.itemDescription) || []                          <<<<<< this check
      }`}</Description>
    </NewsItem>
  );
};

Answer 1

In fact yes, you have many many ways for improving your code and the readabilty of it.

In your <NewItem /> onClick function:

• I have nothing to say for the first one, it seems correct since you want the item link or an empty array
• For the second one, your are already using the optional chaining operator , the "?". This operator check if there is a value, if not, it returns null . That means that should be enough, since you check after your url variable is defined or not. So simply write that: : newsItem?.itemLink

For the third one, the one on your <Image /> component, First there is no need at all to put everything in backquote. Simply alt={newsItem?.itemImage || []} alt={newsItem?.itemImage || []} should work fine. Then, alt attribute is taking a string, so maybe change it with alt={newsItem?.itemImage || ""}alt={newsItem?.itemImage || ""}

For the three last one, they are basically the same, you have content to display and you want to display nothing if there are empty. The fact here is that your are rendering some elements even if there is no content and this is not an optimized way. The cleanest way in my opinion in order to make your template more readable will be to define variable before your return function and based on this variable, you will display the appropriate section:

Before your return function:

const hasTag = !!newsItem?.itemTag;
const hasTitle = !!newsItem?.itemTitle;
const hasDescription = !!newsItem.description && !!newsItem?.itemDescription;

In your template:

 {hasTag && <NewsItemTag color={itemTagColor} itemTagTextColor={itemTagTextColor}> <Body4>{newsItem.itemTag}</Body4> </NewsItemTag>} {hasTitle && <NewsItemName newsItemHeadingColor={newsItemHeadingColor}> {newsItem.itemTitle} </NewsItemName> {hasDescription && <Description textColor={textColor}> {newsItem.itemDescription} </Description>

I hope this was clear, hit me up if this wasn't.

Happy coding:)

Answer 2

There are multiple ways that you could handle this in javascript, assume that we have a component that receives a prop called newsItem which is an object

You could do that in the following ways

• Using the logical operator or (es6)

 const itemLinks = newsItem.links || [] 

you dont need the optional chaining operator (?.) here if you know that newsItem is an object and not undefined .

This is the shortest syntax, and it works fine as long as links is either undefined or an array however it becomes problematic if later links become a boolean variable, which will yield incorrect results This method is not safe, and it becomes cumbersome to handle as properties become nested deeply

• Using lodash get method or some other library or a custom solution (es6)

because in es6 the only practical way was to either the logical operator and this was a common problem, custom solutions were brought it, basically any solution should have two advantages over the logical or operator

1. They should work fine with boolean values

2. They should be easier to work with deeply nested values

custom someDeepleyNested = get(newsItem, 'property1.property2.property3', 'defaultValue')
// there is no need for property1, property2, property3 to exist at all

• Optional chaining operator and Nullish coalescing Operator (stage 4 finished proposals)

Because this was a common problem for all javascript developers,the language had to bring a native solution

const someNestedProperty = newsItem?.property1?.property2?.property3 ?? 'someDefaultValue'

// notice that both the Optional chaining operator and Nullish coalescing Operator, work with both undefined and null

• Specific to react: use default props

const Component = ({newsLink}) => {}
Component.defaultProps = {
 newsItem: {
    itemLinks: []
 }
}