Question

我有一组处于 React 状态的对象。 state = { badgeCounts: [], }; 这个数组不断更新。（每次添加新类型/设置状态时）

这是我在console.log(badgeCounts)时得到的代码

{data: Array(3), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
config: {url: "api/badge/badgeidcount", method: "get", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …}
data: Array(3)
0: {_id: 28, count: 2}
1: {_id: 53, count: 2}
2: {_id: 18, count: 1}
length: 3

...

我的目标是仅在 '_id' 达到计数 10 时才呈现徽章（png 图像）。

{this.state.badgeCounts.map((genId) => {
            switch (genId._id) {
              case 28:
                return <Badge variant="primary">Action</Badge>;
              case 18:
                return <Badge variant="primary">Comedy</Badge>;

我相信我需要更新或设置状态？？？（我正在学习 React）

我在代码和逻辑以及检查每个 _id 及其计数的最佳方法方面遇到问题。我不知道如何继续。我现在有一个 switch 语句（如果它不是一种实用的方法，我可以更改它）但无法检查 count（我总共有 19 个可能的 _id 可能出现在数组中，并带有各自的计数)

谢谢。

Answer 1

我想你使用 Material-UI，但我用基本的 React 制作了一个 JS Fiddle。我不知道你是如何在州内注入更多徽章的，但你没有说你是否以及如何做到的。对于其余的，最好避免切换并在徽章 ID 和徽章信息之间创建一个映射对象。接下来，要仅在 count >= 10 时显示，您将在调用 map 之前过滤数组。这是一种方法：

class BadgeApp extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = {
        badgeCounts: [
        {_id: 28, count: 2},
        {_id: 53, count: 10},
        {_id: 18, count: 7},
        {_id: 60, count: 6},
        {_id: 70, count: 15},
      ]
    };
    
    this.mapping = {
      28: 'Action',
      53: 'Romance',
      18: 'Comedy',
      60: 'Sci-Fi',
      70: 'Horror',
    }
  }
  
  render() {
    return (
      <div>
        <h2>Badges:</h2>
        <ol>
        {this.state.badgeCounts.filter(genId => genId.count >= 10)
          .map(genId => (
          <li key={genId._id}>
            <span>{this.mapping[genId._id]}</span>
          </li>
        ))}
        </ol>
      </div>
    )
  }
}

ReactDOM.render(<BadgeApp />, document.querySelector("#app"))

JS Fiddle 在这里：https://jsfiddle.net/6pk3t87s/1/

如果您需要更多有关徽章的信息，那么您可以尝试更复杂的映射对象，例如：

this.mapping = {
  28: { name: 'Action', color: '#0f0' },
  53: { name: 'Romance' , color: '#ff0' },
  18: { name: 'Comedy', color: '#00f' },
  60: { name: 'Sci-Fi', color: '#000' },
  70: { name: 'Horror', color: '#f00' },
}

遍历对象数组并比较它们

1 个答案: