从 API 调用数组映射并返回未定义时，ReactJS 崩溃

Question

我正在学习 ReactJS 并构建一个从 API 获取数据并将其呈现在页面上的小型应用程序。我有一个侧边栏，其中包含区域列表并进行 API 调用以在单击时检索该区域中的所有国家/地区。

    function getOccurrence(array, value) {
      return array.filter((v) => (v === value)).length;
    }

    let uniqueRegions = totalRegions.filter((v, i, a) => a.indexOf(v) === i);

    let lis = [];
    for (let i = 0; i < uniqueRegions.length -1; i++) {
      lis.push(
        <li className="nav-item" key={i} onClick={props.sideBar}>
          <span className="nav-link bg-success mb-1"><strong>{uniqueRegions[i]}</strong> - {getOccurrence(totalRegions, uniqueRegions[i])}</span>
          <ul>
          {this.props.regionData.map((country, index) => <li key={index}>{country.name}</li>) || null}
          </ul>
        </li>

      )

    }

但是，初始点击会调用该函数并且 return 是一个未定义的数组。当映射到短暂未定义的数组时，它会使应用程序崩溃。我想映射数组，并为数组中的每个项目 return 一个 li。

如果数组未定义，我已尝试有条件地呈现所需元素 {country.name} 和 returning null，但当数组已定义时，所需元素不会呈现。下面是点击时运行的函数，以及设置区域数据状态的回调函数。

  sideBarData = () => {
    let totalRegions = this.state.nations.map(a => a.region)
    function getOccurrence(array, value) {
      return array.filter((v) => (v === value)).length;
    }
    let uniqueRegions = totalRegions.filter((v, i, a) => a.indexOf(v) === i);
    for (let i = 0; i < uniqueRegions.length -1; i++) {
      this.setState({
        regionData: this.findAllByRegion(uniqueRegions[i])
      })
    }
  }

  findAllByRegion = (region) =>{
    return Axios
     .get('https://restcountries.eu/rest/v2/region/' + region)
     .then(res => {
       if(res.status === 200 && res !== null){
        this.setState(prevState =>({
          regionData: res.data
        }))
         console.log(this.state.regionData);
       } else {
         throw new Error('No country found');
       }
       })
       .catch(error => {
         console.log(error)
         return []
       });
   };

我希望在数组未定义时行 {this.props.regionData.map((country, index) => <li key={index}>{country.name}</li>) || null} 为空，但在定义数组时 DOM 不会更新 li。

Answer 1

您不能使用 undefined.map。在通过它进行映射之前，您需要确保该值是一个数组。

例如：

   function getOccurrence(array, value) {
      return array.filter((v) => (v === value)).length;
    }

    let uniqueRegions = totalRegions.filter((v, i, a) => a.indexOf(v) === i);

    let lis = [];

    // this next line here makes sure you always have an array
    const regionData = this.props.regionData || [];

    for (let i = 0; i < uniqueRegions.length -1; i++) {
      lis.push(
        <li className="nav-item" key={i} onClick={props.sideBar}>
          <span className="nav-link bg-success mb-1"><strong>{uniqueRegions[i]}</strong> - {getOccurrence(totalRegions, uniqueRegions[i])}</span>
          <ul>
          {/* never undefined */regionData.map((country, index) => <li key={index}>{country.name}</li>) || null}
          </ul>
        </li>
      )
    }

Answer 2

只需检查您是否从设置状态的 api 获得有效数据，在 findAllByRegion

中执行以下操作

this.setState(prevState =>({
  // always validate your response.
  // if res is undefined doing res.data will crash your app
   regionData: res && res.data || []  
}))

从 API 调用数组映射并返回未定义时，ReactJS 崩溃

ReactJS crashes when mapping over array being called from API and returning undefined

undefined

reactjs

conditional-rendering