Question

两个主要问题。（1）onClick需要更新我的状态下的两个项目（2）我需要过滤状态2以计算字符串出现的次数，并在其等于状态1的长度时呈现它

更多详细信息：

我正在映射我的对象并为每个对象渲染一个按钮。我需要两个不同属性的onClick到setState，以便我传递value = {item.item}来更新状态selectedItems，并传递data-matches = {item.matches}来更新matchsList的状态。

-请注意item.item是一个字符串，item.matches是一个字符串数组。

当我调用onClick来更新状态时，该值可以正常工作，但是数据匹配会创建一个奇怪的对象，我无法对其进行迭代，这就是为什么这就是问题...

我需要遍历数据匹配状态并计算一个字符串的每个实例，如果该特定字符串的计数等于selectedItems状态的长度，则需要渲染该状态。

如果这让您感到困惑，那是因为我完全迷失了这个新知识。也许值得一提的是我的道具来自Redux。

一些参考对象的示例

{
'item': 'apple',
'matches': ['beef', 'bacon', 'cheese', 'carrot'],
},
{
'item': 'carrot',
'matches': ['apple', 'bacon', 'goat'],
},

export class Items extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedItems: [],
      firstStep: true,
      matchesList: []
    };
    this.selectItems = this.selectItems.bind(this);
    this.filterMatches = this.filterMatches.bind(this);
  }

selectItems(event) {
    this.setState({
      selectedItems: [...this.state.selectedItems, event.target.value],
      firstStep: false,
      matchesList: [...this.state.matchesList, event.target.dataset.matches]
    });
  }

在下面的“全部”列中，我正在通过状态selectedItems进行映射，该状态是一个数组，因此我可以从具有相同名称的props中获取实际对象，然后映射到该对象的matchs数组，并抓取与火柴同名的实际对象...

在“交叉引用”列中，我正在映射从onClick更新的状态。这是我需要过滤的位置。在此代码块之后，我将向您展示我的尝试。

render() {
    return (
      <Fragment>
<div className="col">
              <div className="row">
                <div className="col-5">
                  <h1>All</h1>
                  {this.state.selectedItems.map(selected =>  
                    this.props.items.map(item =>
                      item.item == selected
                        ? item.matches.map(match =>
                            this.props.items.map(item =>
                              item.item == match ? (
                                <div>
                                  <p>{item.item}</p>

                                  <button
                                    key={item.item}
                                    value={item.item}
                                    data-matches={item.matches}
                                    onClick={this.selectItems}
                                  >
                                    Select
                                  </button>
                                </div>
                              ) : null
                            )
                          )
                        : null
                    )
                  )}
                </div>
                <div className="col-5">
                  <h1>Cross Referenced</h1>
                  {this.state.matchesList.map(matches => (
                    <p>{matches}</p>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>
      </Fragment>
    );
  }
}

即使matchsList不正确，我也尝试进行过滤。

  filterMatches(matchesList, selectedItems) {
    let arr1 = matchesList;
    let arr2 = selectedItems;

    let obj = arr1.reduce((op, inp) => {
      let key = inp;
      op[key] = op[key] || 0;
      op[key]++;
      return op;
    }, {});

    let final = Object.keys(obj).filter(key => {
      return obj[key] === arr2.length;
    });
    return final;
  }

在渲染中

<div className="col-5">
  <h1>cross referenced</h1>{this.state.matchesList.filter(this.filterMatches(this.state.matchesList, this.state.selectedItems)).map(matches => (
  <p>{matches}</p>
  ))}
  </div>
</div>

Answer 1

我尝试了数据匹配的事情，在我看来event.target.dataset.matches是一个字符串（不是字符串数组，而是一个大CSV字符串）。尝试通过以下方式进行操作：

class YourComponent extends React.Component {

  state = {...};

  selectItems = (item, matches) => {
    this.setState({
      selectedItems: [...this.state.selectedItems, item],
      firstStep: false,
      matchesList: [...this.state.matchesList, ...matches]
    });
  }
  
  render() {
   return (
      {...}
      {this.props.items.map(item => (
        <button
          key={item.item}
          value={item.item}
          onClick={() => this.selectItems(item.item, item.matches)}
        >
          Select
        </button>
      ))}
      {...}
    );
  }
  
}

实际上，我认为我明白了您的问题所在，该过滤器运行正常，并且已经为您提供了["bacon"]数组。尝试摆脱外部过滤器，我看不出它在那里。

const YourComponent = props => (
  {...}
  {this.filterMatches(this.state.matchesList, this.state.selectedItems).map(matches => (
   <p>{matches}</p>
  ))}
  {...}
);

从onClick设置为数据输入时的过滤器状态

1 个答案: