Javascript 如何使用.filter（）从数组中删除值？_Javascript_Reactjs

Javascript 如何使用.filter（）从数组中删除值？

javascript reactjs

Javascript 如何使用.filter（）从数组中删除值？,javascript,reactjs,Javascript,Reactjs,我正在做一个游戏排行榜。我正在使用的userInfo数组包含从json表获取的数据。该数组包含id、username、besttruments和besttime以及每个类别的数据此表当前有4列，json表中的所有数据都在表行中。我需要表格不显示具有bestattems

我正在做一个游戏排行榜。我正在使用的userInfo数组包含从json表获取的数据。该数组包含

id

、

username

、

besttruments

和

besttime

以及每个类别的数据

此表当前有4列，json表中的所有数据都在表行中。我需要表格不显示具有

bestattems<5

或

besttime==0

的用户的数据。我正在尝试从数组中筛选数据，但它不起作用，我遇到了以下错误：

TypeError:无法将此行的未定义或null转换为object

const keys=object.keys（newArray[0]）

代码如下：

import React from "react";
import "./LeaderBoard.css";


const Head = ({keys, head}) => {
  return (
    <thead>
      <tr>
    {
      keys.map(key =><th key={key}>{head[key] || key}</th> )
    }
    </tr>
  </thead>

  )
}
const Row = ({row}) => {
  const keys = Object.keys(row)

  return (

  <tr key={row.Rank}>
    {
      keys.map(key => <td key={key}>{row[key]}</td>)

    }

 </tr> )
}
  const LeaderBoard = ({usersInfo, head}) => {

    usersInfo.sort(function sortByAttempts(a, b) {
      if(a.bestattempts !== b.bestattempts){
        return a.bestattempts - b.bestattempts
      }else{
        return a.besttime - b.besttime
      }

  });

const newArray = usersInfo.map(({ id, ...rest }, index) => ({ Rank: index + 1, ...rest }) )

  const keys = Object.keys(newArray[0])

  const filteredData = newArray.filter(usersInfo => usersInfo.bestattempts >= 5 && usersInfo.besttime !== 0);



  return (
  <div className="Leaderboard-wrapper">
  <table>
    <Head keys={keys} head={head}/>
    <tbody>
      {
        filteredData.map((row) => <Row row={row}/>)
      }
    </tbody>
  </table></div>
)
};

export default LeaderBoard;

您可能想要硬编码标题。不要依赖过滤器中的数据，因为它可能会导致空数组，因此

array[0]

throws，而应该考虑硬编码标题。小更改，如

const key=['Rank'、'username'、'besttruments'、'besttime']。

此外，最终您希望标题值不依赖于描述对象的键。我还建议更改Row的实现，并决定返回键的顺序，而不是在所有键中执行循环。差不多

<td>{row['Rank']}</td>
<td>{row['username']}</td>
<td>{row['bestattempts']}</td>
<td>{row['besttime']}</td>

{row['Rank']}
{row['username']}
{行['bestattempts']}
{row['besttime']}

这样您就可以完全控制值的顺序。

您可以创建一个简单的示例来演示此问题吗？

filteredata

数组为空。因此，

Object.keys（未定义）

引发了错误。您还应该将

过滤器

回调中的参数名称更改为与数组本身不同。目前，两者都是

usersInfo

@adiga我该如何解决这个问题？这不是假设在其中过滤usersInfo数组吗？在

usersInfo

中是否有满足条件的项？

<td>{row['Rank']}</td>
<td>{row['username']}</td>
<td>{row['bestattempts']}</td>
<td>{row['besttime']}</td>