使用 state 挂钩有条件地更新数组

Question

我想使用 useState 挂钩将项目添加到数组中，而不是执行 array.push。 这是原始代码：

   let tags = []
      data.blog.posts.map(post => {
        post.frontmatter.tags.forEach(tag => {
          if (!tags.includes(tag)){
            tags.push(tag)
          }
        })
      })

这是我用 React 尝试过的几件事之一：

const [tags, setTags] = useState([])
  
  data.blog.posts.map(post => {
    post.frontmatter.tags.map(tag => {
      if (!tags.includes(tag)){
        setTags(tags => [...tags, tag])
      }
    })
  })

“标签” state 变量在上面的示例中没有收到任何内容。

我查看了各种类似的线程，但那里的问题和解决方案很难转化为这种情况。

Answer 1

尝试这样的事情。 我不会在循环中添加 setState，因为每次向其中添加内容时都会触发重新生成器。

const [tags, setTags] = useState([])

const myTags = []
data.blog.posts.map(post => {
    if (!tags.includes(tag)) {
        myTags.push(tag)
    }
})
setTags([...myTags])

Answer 2

您可以尝试在初始渲染中或根据您的要求在任何事件中设置标签 state。

const [tags, setTags] = useState([]);

useEffect(()=>{
  const arr=[];
  data.blog.posts.map(post => {
    post.frontmatter.tags.map(tag => {
      if (!arr.includes(tag)){
        arr.push(tag)
      }
    })
  });
 setTags([...arr]);
},[]);