如何在地图函数中使用 setState

Question

我正在尝试在地图功能中使用 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 不是函数”

我希望当我点击按钮时，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 属性。

谢天谢地，有人问了使用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（我已经为非韩语人士翻译了评论）

所以你做了这样的改变之后就不能再使用.map了？

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

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

您可以点击“Run code sn-p”按钮查看输出

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>

Answer 2

试试这个 :::

{this.state.categories.map(item => ( ..... ))}