映射到多个数组，并且只返回特定的数组

Question

我目前有一个axios get请求，它从nasa API获取数据，并将其返回到一个数组列表中。

getDataHandler= () => {
  axios.get('https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=DEMO_KEY',)
  .then((response) => {
    const restructuredData = response.data.near_earth_objects.map(
      ({ name, estimated_diameter, close_approach_data }) => {
        const close_approaches = close_approach_data && close_approach_data.length
          ? close_approach_data.map(({ orbiting_body }) => orbiting_body)
          : ["no orbited planet"] // If the array doesn't exist, just use an empty array.

        return [
          name,
          estimated_diameter.kilometers.estimated_diameter_min,
          estimated_diameter.kilometers.estimated_diameter_max,
          close_approaches[0]
        ]
      })
    })

它返回一个数组列表，如下所示：

0: (4) ["21277 (1996 TO5)", 1.6016033798, 3.5812940302, "Mars"]
1: (4) ["162038 (1996 DH)", 1.2721987854, 2.844722965, "no orbited planet"]
2: (4) ["189058 (2000 UT16)", 1.332155667, 2.978790628, "Earth"]
3: (4) ["276274 (2002 SS41)", 0.9650614696, 2.1579430484, "Earth"]
4: (4) ["322913 (2002 CM1)", 1.214940408, 2.7166893409, "Jupiter"]
5: (4) ["435730 (2008 UK90)", 0.4411182, 0.9863702813, "no orbited planet"]

然后它获取列表并对其执行setState操作。

问题是我有一个dropDown菜单，只显示来自特定行星的数据。所以我想知道是否有可能再次绘制它的地图，并且只保留与当前选择的行星相等的那些。如果没有选择任何行星，则返回所有这些行星。

到目前为止我所拥有的代码

     class MainPage extends Component {

state = {
    data: [['name', 'min estimated diameter', 'max estimated diameter', { role: "planet" }]],


    dropDownOptions: [    
                        { value: 'all', label: 'All' },
                        { value: 'earth', label: 'Earth' },
                        { value: 'mars', label: 'Mars' },
                        { value: 'mercury', label: 'Mercury' },
                        { value: 'venus', label: 'Venus' },
                        { value: 'saturn', label: 'Saturn' },
                        { value: 'jupiter', label: 'Jupiter' },
                        { value: 'no orbited planet', label: 'No orbited planet'}
                    ],
    SelectedDropDownOption: { value: 'all', label: 'All' },

}

 componentDidMount() {

  this.getDataHandler()
 }


  getDataHandler= () => {
  axios.get('https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=DEMO_KEY',)
.then((response) => {
    const restructuredData = response.data.near_earth_objects.map(
      ({ name, estimated_diameter, close_approach_data }) => {
        const close_approaches = close_approach_data && 
     close_approach_data.length
      ? close_approach_data.map(({ orbiting_body }) => orbiting_body)
      : ["no orbited planet"] 

        return [

          name,
          estimated_diameter.kilometers.estimated_diameter_min,
          estimated_diameter.kilometers.estimated_diameter_max,
          close_approaches[0]
        ]
      } 
    )

    const joined = this.state.data.concat(restructuredData)

    this.setState({ data: joined })
  })
.catch(function (error) {
  console.log(error);
})
}


DropDownChangeHandler= (SelectedDropDownOption) => {
console.log("hello")
this.setState({SelectedDropDownOption});
 }

render () {

    console.log(this.state.data)
    console.log(this.state.SelectedDropDownOption)
    console.log(this.state.SelectedDropDownOption.value)
   return (
    <React.Fragment>
        <DropDown options={this.state.dropDownOptions} onChange={this.getPlanetInformation}/>
        <Chart chartData={this.state.data} />
    </React.Fragment>
    );
}
}

导出默认MainPage；

Answer 1

您可以使用filter方法来实现您的目标。您循环遍历每个子数组，并且只保留那些包含作为函数参数传递的所需行星名称的子数组。

const arrayList = [["21277 (1996 TO5)", 1.6016033798, 3.5812940302, "Mars"], ["162038 (1996 DH)", 1.2721987854, 2.844722965, "no orbited planet"], ["189058 (2000 UT16)", 1.332155667, 2.978790628, "Earth"],["276274 (2002 SS41)", 0.9650614696, 2.1579430484, "Earth"], ["322913 (2002 CM1)", 1.214940408, 2.7166893409, "Jupiter"]]

const getPlanetInformation = (planet) => {
  const information = arrayList.filter(item => item.includes(planet))
  console.log(information)
  return information.length ? information : arrayList
}

如果没有从下拉值中选择任何行星，或者所选的行星不存在于数组中，则只需返回初始值即可。