Question

我正在尝试在地图功能中使用setState 当我点击使状态改变的单击按钮时我想做的事情

我在stackoverflow中搜索了“在地图函数中更改了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，以通知反应状态已更改，并添加一个key道具。

非常感谢，有人问了一个使用密钥的原因（仅两个小时前）并回答了，您可以参考。

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。

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

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 => ( ..... ))}

如何在地图功能中使用setState

2 个答案: