仅显示那些不在反应中的另一个数组中的元素[重复]答案

【问题标题】：Show only those elements those are not in another array in react [duplicate]仅显示那些不在反应中的另一个数组中的元素[重复]
【发布时间】：2020-09-08 05:23:33
【问题描述】：

我有一个 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 数组中的水果，然后如果我删除这些水果，它会再次显示。

【问题讨论】：

因为水果很少，你可以用.includes过滤掉它们：this.fruits.filter(fruit => !this.state.user_fruits.includes(fruit)).map(....)
顺便说一句，传递给this.state.user_fruits.map的函数将返回未定义，因为函数周围有花括号{ }，但没有return。
你只需要在user_fruits数组中添加或删除任何水果时正确更新user_fruits和fruits数组。当在user_fruits 数组中添加任何水果时，从fruits 数组中删除该水果，类似地，当从user_fruits 数组中删除任何水果时，将其重新添加到fruits 数组中。以this 方式实现从user_fruits 数组中添加或删除水果的函数

标签： javascript arrays reactjs

【解决方案1】：

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】：

            {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 函数

【讨论】：

数组中元素的数量无关紧要。如果此代码（与建议的副本的答案中的代码相同）不起作用，则代码还有其他问题。例如，this.fruits 或 this.state.user_fruits 不包含您认为它们包含的值。