javascript - map函数中setState的使用方法

Question

我正在尝试在 map 函数中使用 setState当我点击使状态改变的点击按钮时我想做什么

我在 stackoverflow 中搜索“In map function changed setState”

但很难理解..并应用我的案例

this.state = {
      categories: [
        {
          category: 'sports',
          ariticles: [],
          isClick: true
        },

...
...

 return (
      <div>
        <hr></hr>

        <div className="categoryBtn">
          {this.state.map(item => (
            <button
              onClick={
                () => this.setState(() => (item.isClick = false))
                // () => console.log((item.isClick = false))
                // this.setState(() => (item.isClick = !item.isClick))
              }
            >
              {' '}
              {item.category}
            </button>
          ))}

当我按下按钮时出现错误“this.state.map is not a function”

我希望当我按下按钮时，isClick 会切换

Answer 1

你的this.state指的是一个包含数组的对象，

categories: [...]

所以你需要映射 this.state.categories.map 而不是 this.state.map

---

而且，我注意到 button 事件处理程序会改变状态。

<button onClick={() => this.setState(() => (item.isClick = false))}>
  {item.category}
</button>

您需要返回一个新项目 reference 以通知 React 状态已更改以及添加 key Prop 。

幸好有人问了使用key的原因(2小时前)并回复了，可以引用。

https://stackoverflow.com/a/57838612/4035

<button key={item.category} onClick={() => this.setState({
    find the item by searching for each item in `this.state.cateogies`
  })}>
  {item.category}
</button>;

但是随后很难找到正确的元素，因此我建议将规范化(意味着更改 this.state.categories)看起来也像下面这样，以便更轻松地设置状态。

// From this
this.state = {
  categories: [
    {
      category: "sports",
      ariticles: [],
      isClick: true
    },
    {
      category: "sports",
      ariticles: [],
      isClick: true
    }
  ]
};

// to this
this.state = {
  categories: {
    sports: {
      category: 'sports',
      ariticles: [],
      isClick: true
    },
    news: {
      category: 'news',
      ariticles: [],
      isClick: true
    }
  }
};

这样，您可以像下面这样设置状态。

<button
  key={item.category}
  onClick={() =>
    this.setState({
      [item.category]: {
        isClick: false
      }
    })
  }
>
  {item.category}
</button>

---

回复comment below (我已经为非韩语人士翻译了评论)

So you can't use .map any more after making such a change?

对不起，我应该在状态更新后更新类别项目生成代码。

不，您不能使用 .map，因为它现在是一个对象。但值得庆幸的是，您可以使用 Object.keys/value/entries 来迭代 this.state.categories。

您可以点击“运行代码片段”按钮查看输出

let state = {
  categories: {
    sports: {
      category: "sports",
      ariticles: [],
      isClick: true
    },
    news: {
      category: "news",
      ariticles: [],
      isClick: true
    }
  }
};

Object.entries(state.categories).map(([id, item]) => console.log(item))

所以你的代码看起来像这样

<div className="categoryBtn">
  {Object.entries(state.categories).map(([id, item]) => (
    <button
      key={id}
      onClick={() =>
        this.setState({
          [item.category]: {
            isClick: false
          }
        })
      }
    >
      {item.category}
    </button>
  ))}
</div>