更新保存在我前端数组中的数据答案

【问题标题】：update data saved in an array in my frontend更新保存在我前端数组中的数据
【发布时间】：2020-05-14 22:22:06
【问题描述】：

这里的问题是我从后端带来了我的朋友列表并将其存储在前端的一个数组中以便我可以使用它但是当我的朋友列表中的用户更新他的图片时它没有在我的列表中更新所以对我来说，这里的挑战是我想要一种方法来更新数组中的这些数据我想出了一个办法，但它只能在点击时工作，所以这对于良好的用户体验是不可接受的，这应该是动态的，我也尝试过 socket io 但这数据已经存储在我的数组中，所以我看不到套接字在这方面会有用，任何人都面临过这样的问题，如果有更好的方法请告诉我，我使用 react、redux、mongodb 和 Node

exports.getFriendList = async (req, res) => {
  try {
    let user = req.user;
    const myFriendList = await Friend.findOne({ user: user.id });
    io.emit('get friend', myFriendList);
    res.json(myFriendList);
  } catch (err) {
    console.error(err.message);
    res.status(500).json({ msg: err.message });
  }
};

这就是数据来自数据库的方式，在其他用户更新图像后，追随者和跟随数组保持不变我尝试在使用套接字 io 更新我的图像作为测试后获取我的朋友列表，但它不起作用

【问题讨论】：

标签： node.js reactjs mongodb redux

【解决方案1】：

如果您希望图像在更新时在前端自动更新，Socket.io（或类似的 websocket 库）正是您所需要的。

您的目标是建立侦听器以更新个人资料图像，并向侦听该事件的人发送消息。

您似乎非常关心前端数组中已经存在的图像，但没有理由在初始化后无法修改数组。

为了争论，你的发射可能是这样的：

app.post(`/api/update-avatar`, function (req, res) => {

//Deal with updating the image here
//............


//Then emit the image
io.emit(`user-image-updated`, {userId: 2, userAvatar: yyyyyyyyy})

})

您的前端侦听器可能如下所示：


const FriendList = (props) => {
  const [friends, setFriends] = React.useState([
    { userId: 1, userAvatar: null, userId: 2, userAvatar: null },
  ]);

  socket.on(`user-image-updated`, (data) => {
    setFriends((currentListOfFriends) => {
      return currentListOfFriends.map((eachFriend) => {
        if (eachFriend.userId == data.userId) {
          return data;
        } else {
          return eachFriend;
        }
      });
    });
  });

  return (
    <ul>
      {friends.map((friend) => (
        <li>
          <img src={friend.userAvatar} />
        </li>
      ))}
    </ul>
  );
};

【讨论】：

我这样做了，但它给我带来的是旧图像而不是新图像的数据
这很可能意味着您在新图像的写入完成之前发出了消息。

【解决方案2】：

虽然你的问题不是很清楚，有很多方法可以解决这个问题... 您可以使用套接字发送好友列表，因此每当有新数据来自您的服务器时，它都会替换您前端好友列表数组中的现有数据。

【讨论】：