Question

我试图获取一个e.target.value这是一个图标并从状态中的数组中过滤出来，并重新渲染新状态减去匹配的图标。我无法将其串联起来进行匹配。我试着推送到数组和toString（）。 CodeSandbox

✈[＆＃34;✈＆＃34;，＆＃34;♘＆＃34;，＆＃34;✈＆＃34;，＆＃34;♫＆＃34;，＆＃34;♫ ＆＃34;，＆＃34;☆＆＃34;，＆＃34;♘＆＃34;，＆＃34;☆＆＃34;]

以下是代码段（Parent）

removeMatches(icon) {
 const item = icon;
 const iconsArray = this.props.cardTypes;
 const newIconsArray =iconsArray.filter(function(item) {
  item !== icon
  })
this.setState({ cardTypes: newIconsArray });
}

这是父组件卡片中的一个函数，当单击子组件时，我将一个值传递给onClick。下面是子组件

中的单击处理程序

handleVis(e) {
 const item = e.target.value
this.props.removeMatches(item)
 }

Answer 1

首先，过滤＆＃34;图标＆＃34;没有什么不同。任何其他字符串的字符串数组。你的例子是这样的：

const icons = ["✈", "♘", "✈", "♫", "♫", "☆", "♘", "☆"]
const icon = "✈";
const filteredIcons = icons.filter(i => i !== icon);
filteredIcons // ["♘", "♫", "♫", "☆", "♘", "☆"]

您的CodeSandbox示例还有其他一些问题：

您的Card.js组件调用this.props.removeMatches([item])，但removeMatches函数将参数视为单个项目，而不是数组。
您的Cards.js removeMatches()函数过滤器this.props.cardTypes（前面提到的有关将参数视为单个项而非数组的错误）但未将结果分配给任何内容。 Array.filter()返回一个新数组，它不会修改原始数组。
您的Cards.js正在从<Card>呈现props.cardTypes个组件，这意味着Cards.js只会从其提供的道具中呈现卡片，因此它不能从组件内部过滤出prop。您有几个选择：
1. 将removeMatches更高的位置传递到存储卡状态的位置，Game.js为this.state.currentCards，然后将其Game.js过滤掉已将currentCards过滤回Cards.js。
```
// Game.js
removeMatches = (items) => {
  this.setState(prevState => ({
    currentCards: prevState.currentCards.filter(card => items.indexOf(card) == -1)
  }));
}
// ...
<Cards cardTypes={this.state.currentCards} removeMatches={this.removeMatches} />

// Cards.js
<Card removeMatches={this.props.removeMatches}/>

// Card.js -- same as it is now
```
2. 将Cards.js props.cardTypes移至state.currentCards内的状态（例如Cards.js），然后您可以在Cards.js中对其进行过滤，并从{ {1}}代替state.currentCards。要执行此操作，您还需要挂钩props.cardTypes，以确保componentWillReceiveProps()从currentCards传递prop.cardTypes时更新Game.js state.currentCards。这种保持状态与道具同步可能会变得混乱而难以遵循，因此选项1可能更好。
```
Cards.js
```
3. 将所有已删除的卡存储在// Cards.js state = { currentCards: [] } componentWillReceiveProps(nextProps) { if (this.props.cardTypes !== nextProps.cardTypes) { this.setState({ currentCards: nextProps.cardTypes }); } } removeMatches = (items) => { this.setState(prevState => ({ currentCards: prevState.currentCards.filter(card => items.indexOf(card) == -1) })); } render() { return ( <div> { this.state.currentCards.map(card => { // return rendered card }) } </div> ); }状态，并在呈现Cards.js之前过滤cardTypes（您还需要重置每当更换当前卡时，removedCards removedCards：
```
componentWillReceiveProps
```

如您所见，将状态保存在// Cards.js state = { removedCards: [] } componentWillReceiveProps(nextProps) { if (this.props.cardTypes !== nextProps.cardTypes) { this.setState({ removedCards: [] }); } } removeMatches = (items) => { this.setState(prevState => ({ removedCards: [...prevState.removedCards, ...items] })); } render() { const remainingCards = this.props.cardTypes.filter(card => { return this.state.removedCards.indexOf(card) < 0; }); return ( <div> { remainingCards.map(card => { // return rendered card })} </div> ); }中的某个位置可能是您最干净的解决方案。

您可以在此分叉CodeSandbox中看到所有3个示例（第二个2个解决方案已被注释掉）：https://codesandbox.io/s/6yo42623p3

从图标字符串数组中过滤图标以进行重新渲染

1 个答案: