如何使用 map() 或 foreach() 将新对象添加到现有的 useState 数组？

Posted 2023-02-22

【中文标题】如何使用 map() 或 foreach() 将新对象添加到现有的 useState 数组？

【英文标题】：How to add new objects to an existing useState array using map() or foreach()?

【发布时间】：2020-10-26 01:01:17

【问题描述】：

我正在尝试创建 Twitter 克隆，但我的新闻提要出现问题。基本上，它从我的 firebase 数据库中为每个用户提取推文，然后是当前用户。因此，假设您关注 Jon Abrahams 和 Terry Crews，对于这 2 个中的每一个，它都会提取“tweets”集合，并且对于每条推文，它都会返回数据。

我是用 useState 和 useContext 做的（因为我需要 Context 并且不能让它在类组件中工作，但还需要 state ）。

  const CurrentUser = useContext(CurrentUserContext);
  const [tweets, setTweets] = useState(tweets: []);

  const feedTheFeed = async (id) => 
  const followedUsers = await getFollowedUsers(id);

  if(followedUsers) 
    followedUsers.docs.forEach(async doc => 
      const followedId = doc.data();
      const unformatTweets = await getTweetsByUser(followedId.follows);

      if(unformatTweets.docs) 
        unformatTweets.docs.map(unformatTweet => 
          const tweetText = unformatTweet.data();

          setTweets(
            tweets: [...tweets, tweetText]
          )
          // console.log(tweetText);
        )
      
    )

    // console.log(tweets);
  

  

  useEffect(() => 
    if(!CurrentUser) return;

    if(CurrentUser.id || CurrentUser.uid) 
      feedTheFeed(CurrentUser.id);
    
  , [CurrentUser]);

问题是加载组件时出现问题，它说“tweets is not iterable”，但它是一个数组，所以我不明白为什么它不起作用。有人有想法吗？

谢谢！

【问题讨论】：

它不是一个数组；初始值为 tweets: [] ，所以tweets是一个对象，tweets.tweets是数组。

对，不知道为什么我在设置默认值时添加了“tweet”。我更改了它，现在在 return() 语句中记录推文时，我只得到数组中的一项，我之前在尝试不同的事情时遇到过这个问题

如果您在setTweets 之后立即记录它，您仍然会看到旧值；在组件重新渲染并再次调用 useState 之前，它不会更新。

显示组件时，我将它记录在最后的 return() 语句中，有第一项，在下一个循环中，推文替换了前一个

【参考方案1】：

看来你想要的是

const [tweets, setTweets] = useState([]);

和

setTweets([...tweets, tweetText])

【讨论】：

有道理，谢谢！虽然现在我在组件的 return() 部分中 console.log() 时总是在数组中得到一个项目

支持你，但我认为最好使用回调：setTweets(oldTweets => [...oldTweets , tweetText]);

时间不早了，今天先放着，明天试试 prevTweets 的东西，我知道 setState 有这个，但不知道能不能用 hooks，谢谢

@Omer，如果我没记错的话，该代码不起作用，因为它将“推文”设置为一个函数。

看看(***.com/questions/55342406/…)

【参考方案2】：

我想你想做的是这个.....

const [tweets, setTweets] = useState([]);

setTweets(b => [...b, tweetText])

【讨论】：

添加旧问题（13 个月前）的答案时，请考虑在发布您的之前阅读其他人的答案。你的答案已被收录here。