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

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它。

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

目前为止的代码

     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>
    );
}
}

导出默认主页面；

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
}

如果没有从您的下拉值中选择行星或所选行星在您的数组中不存在，您可以只返回初始值。