Question

我有一个fruits数组，用户可以选择水果，并且用户选择的水果将添加到另一个称为user_fruits的状态数组中。如果用户选择了水果，则该水果将不再可用。

fruits = ['apple', 'mango', 'watermelon', 'jackfruite', 'guava', 'berry']
state = {
  user_fruits: []
}

addFruitToTheList = () => {
  //This function adds fruits to the user_fruite array
}

deleteFruitsList = () => {
  // This function deletes the fruits from the user_fruit array
}

render() {
  return (
    <div>
        {/*here I want to render only those that are in the user list*/}
        {this.state.user_fruits.map((key, id) => {
          return <li>
            {key}<button onClick={this.removeTheFruiteFromUserList}>X</button>
          </li>
        })}

        {/*but I want to render only those that are not in the user list*/}
        {this.fruits.map((key, id) => {
          return <button onClick={this.addFruitToTheList} key={id} value={key}>{key}</button>   
        })}
    </div>
  )
}

如何仅显示那些不在user_fruits数组中的水果，然后如果我删除这些水果，它将再次显示。

Answer 1

            {this.fruits.filter(fruit => !this.state.user_fruits.includes(fruit)).map((key, id) => {
                return <button onClick={this.addFruitToTheList} key={id} value={key}>{key}</button>   
            })}

您可以在 map 函数

前面附加一个 filter 函数。

Answer 2

const allFruits = [
  "apple",
  "mango",
  "watermelon",
  "jackfruite",
  "guava",
  "berry"
];

export default function App() {
  const [selectedFruits, setSelectedFruits] = React.useState<string[]>([]);
  const availableFruits = allFruits.filter(
    fruit => !selectedFruits.includes(fruit)
  );

  const selectFruit = (fruit: string) =>
    setSelectedFruits([...selectedFruits, fruit]);
  const deselectFruit = (fruit: string) =>
    setSelectedFruits(selectedFruits.filter(f => f !== fruit));

  return (
    <div>
      <div>
        <h2>User selected fruits</h2>
        {selectedFruits.map(fruit => (
          <button key={fruit} onClick={() => deselectFruit(fruit)}>
            {fruit}
          </button>
        ))}
      </div>

      <div>
        <h2>Available fruits</h2>
        {availableFruits.map(fruit => (
          <button key={fruit} onClick={() => selectFruit(fruit)}>
            {fruit}
          </button>
        ))}
      </div>
    </div>
  );
}

您可以在这里https://codesandbox.io/s/proud-morning-7lo91

只显示那些不在另一个数组中的元素

2 个答案: