在 React 中使用按鈕過濾數組

Question

所以我正在制作一個過濾列表應用程序，您可以在其中單擊按鈕，它會排除名稱中包含該字母的所有用戶。 這是我到目前為止所擁有的，但它對我不起作用。 任何幫助，將不勝感激。

我也不斷收到此錯誤。/src/index.js 及其引發這些錯誤

應用程序.js

import React from 'react';
import "./App.css";
const buttons = [
  { name: "Reset", value: "Reset"},
  { name: "Bryan", value: "B"},
  { name: "Annie", value: "A"},
  { name: "Miles", value: "M"},
  
];
class User extends React.Component {
 constructor() {
   super();
   this.state = {
     users: [
       {
         name: "Bam",
       },
       {
         name: "Brinley",
       },
       {
        name: "Bart",
      },
      {
        name: "Brielle",
      },
      {
        name: "Booka",
      },
      {
        name: "Ann",
      },
      {
        name: "Analise",
      },
      {
        name: "Anthony",
      },
      {
        name: "Arrow",
      },
      {
        name: "Arika",
      },
      {
        name: "Marty",
      },
      {
        name: "Mike",
      },
      {
        name: "Minto",
      },
      {
        name: "Milk",
      },
      {
        name: "Monty",
      },
      {
        name: "Brett",
      },
      {
        name: "Byron",
      },
      {
        name: "Brad",
      },
      {
        name: "Bento",
      },
      {
        name: "Bark",
      },
     ]
     filterName: []
   };
 }
 componentDidMount() {
  this.setState({
    filterName: this.state.users
  });
}
handleClick = name => {
  let filterName = [];
  if (name === "All") {
    filterName = this.state.users;
  } else {
    filterName = this.state.users.filter(
      users => users.origin === name
    );
  }

  this.setState({ filterName });
};

render() {
  const renderAll = this.state.filterName.map(User => (
    <li key={User.name}>{users.name}</li>
  ));
  return (
    <div>
      {buttons.map(({ name, value }) => (
        <button
          key={name}
          value={value}
          onClick={this.handleClick.bind(this, name)}
        >
          {name}
        </button>
      ))}

      <p>User: {renderAll}</p>
      <h2>{this.state.filterName.length}</h2>
    </div>
  );
}
}

export default App;

Answer 1

您在filterName之前漏掉了一個逗號

//more on top
  {
        name: "Bark",
  },
],
filterName: []

我已經為你的onClick function 做了修改

handleClick = name => {
  let filterName = []
  const { users } = this.state;

  if (name && name !== "All") {
    filterName = users.filter(
      //no such property called origin, only 'name' occurs. Therefore, I assume that you mean you want to use name as the sorting criteria
      user => user.name === name
    );
  } else {
     // For name === 'all' && name === undefined cases
     filterName = users
  }

  this.setState({ filterName });
};

Answer 2

這是一個語法錯誤，您在filterName: []之前錯過了一個逗號。