在具有 usestate 的对象中添加数组中的项目代替它

Question

到处寻找，但找不到解决我的问题的方法。我有一个监听器，用于在添加消息时起作用，但由于某种原因，当消息被添加到使用状态中的数组时，消息数组被替换，因此当我将 onmModified 添加到其中时，其中只有一个项目，它变得更糟...它没有更新该值，而是清空了整个数组...

  const { chatID } = route.params;

  const [values, setValues] = useState<States>({
    chat: chats[chats.findIndex((c) => c.chatID === chatID)],
    messages: [],
    isLoading: false,
    input: "",
    isSending: false,
  });

  useEffect(() => {
    initMessages(); // Fetches previous messages which works but the listener below finds a need to replace the array instead of just adding to it... 
    
    const unsubMessages = MessagesAPI.incomming(values.chat,
      (message) => {
        console.log("onAdded: " + message?.messageID);
        setValues({ ...values, messages: [...values.messages, message!] }); // This...
      }, (message) => {
        console.log("onModified: " + message?.messageID);
        setValues({
          ...values, messages: values.messages.map((m: Message, idx: number) => {
            if (m.messageID === message!.messageID) {
              return message!;
            }
            return m;
          })
        }); // And this......
      }, (message) => {
        console.log("onRemoved: " + message?.messageID);
      }, (err) => {
        console.log(err);
      }, () => {
        console.log("Closed...");
      });
  }, []);

Answer 1

你是运行这个里面的一个 useEffect 钩子。每当一种效果使用可能从一个渲染周期到下一个渲染周期发生变化的东西时（比如 state 和 props 变量），它需要被添加到依赖数组中。否则你的效果将“保留”过时的变量。对此要格外小心，尤其是当你的效果运行只有一次时，就像你的效果（因为 [] 依赖数组是空的）。

当您的侦听器运行时，它可能看到变量 values 的陈旧值。就像您在 useEffect.

上设置侦听器时一样

因此，理论上，您需要将 values 变量添加到依赖项数组中。并在每次 values 变量更改时设置和删除侦听器。

但是从你正在尝试做的事情来看，根本不使用 values 变量更容易，而只使用 setState 调用的函数形式。

您可以访问 prevState 变量，该变量将始终 up-to-date 与您用于将其更新为新状态的先前状态。

替换为：

setValues({ ...values, messages: [...values.messages, message!] });

有了这个：

setValues((prevState) => 
  ({ ...prevState, messages: [...prevState.messages, message!] })
);

对另一个 setValues 呼叫执行相同的操作。

看看是否可行。

在具有 usestate 的对象中添加数组中的项目代替它

Adding item in array in an object with usestate replaces it instead

react-native

google-cloud-firestore

react-hooks

use-state