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>

      )

    }

但是，第一次单击会调用该函数并返回一个未定义的数组。在短暂地未定义的数组上映射时，它会使应用程序崩溃。我想映射到数组并为数组中的每个项目返回一个li。

我尝试有条件地渲染所需元素{country.name}，如果未定义数组，则返回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}为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崩溃

2 个答案: