保存到狀態 React 時，如果在 JSON 中找不到值，如何創建回退

Question

這是我的 get 請求，它獲取了幾個不同的 JSON 端點：

// Grabs the posts from the json url
private getPosts() {
   axios
      .get( this.getCompanyUrl() )
      .then(response =>
        response.data.map(post => ({
          id: `${ post.Id || post.jobId }`,
          name: `${ post.Name || post.advertisements[0].title.localization[0].value }`,
          name2: `${ post.Name || post.title.localization.pop().value }`, 
          //location: `${ post.Location || post.department.title.localization[0].value || 'Fall back location' }`,
        }))
      )
      .then(posts => {
        this.setState({
          posts,
          isLoading: false
        });
      })
       // Error catching
      .catch(errors => this.setState({ errors, isLoading: false }));
}

如果在 JSON 中找不到位置，我想添加一個后備位置，但它似乎不起作用：

Line 214 >> location: `${ post.Location || post.department.title.localization[0].value || 'Fall back location' }

我收到此錯誤，即使應該回退工作：

類型錯誤：無法讀取 JsonFeed.tsx:214 at Array.map () at JsonFeed.tsx:210 處未定義的屬性“title”

我哪里出錯了？

Answer 1

如果您的應用程序支持可選鏈接，那么您可以這樣做：

post.Location || post.department?.title?.localization?[0]?.value || 'Fall back location'

否則，您可以使用老式風格：

post.Location ||
(
  post.department &&
  post.department.title &&
  post.department.title.localization &&
  post.department.title.localization[0] &&
  post.department.title.localization[0].value
) ||
'Fall back location'