Реагировать на хуки с useState - PullRequest
Новая
       23

Реагировать на хуки с useState

0 голосов
/ 06 августа 2020

У меня есть следующий код: 

export default function App() {
    const [lastMessageId, setLastMessageId] = useState(0);
    const [messages, setMessages] = useState([]);

    const addMessage = (body, type) => {
        const newMessage = {
            id: lastMessageId + 1,
            type: type,
            body: body,
        };
        setLastMessageId(newMessage.id)
        setMessages([...messages, newMessage]);
        console.log("point 1", messages);
        return newMessage.id;
    }

    // remove a message with id
    const removeMessage = (id) => {
        const filter = messages.filter(m => m.id !== id);
        console.log("point 2", filter);
        setMessages(filter);
    }

    // add a new message and then remove it after some seconds
    const addMessageWithTimer = (body, type="is-primary", seconds=5) => {
        const id = addMessage(body, type);
        setTimeout(() => removeMessage(id), seconds*1000);
    };

    return (
        ...
    );
}

Я хотел бы знать, почему после того, как я установил сообщения в точке 1, когда я вхожу в консольный журнал, он, похоже, не обновляется. Это превращается в странное поведение, когда я вызываю addMessageWithTimer, потому что, когда он вызывает removeMessage, он не удаляет правильно ожидаемые сообщения.

Не могли бы вы объяснить мне, как это сделать?

Ответы [ 4 ]

2 голосов
/ 06 августа 2020

Так же, как setState в компонентах классов, функции обновления useState не обновляют состояние немедленно, они планируют обновление состояния.

Когда вы вызываете setMessages он заставляет реагировать на расписание нового рендеринга App, который снова выполнит функцию App, а useState вернет новое значение messages.

И если вы подумаете об этом с чистой точки зрения JS, messages не может изменить: это просто локальная переменная (даже const). Вызов нелокальной функции не может привести к изменению значения локальной переменной, JS просто так не работает.

0 голосов
/ 06 августа 2020

@ Retsam был очень полезен своим ответом, поскольку я смог понять проблему и найти правильное решение.

вот решение, которое я нашел: 

export default function App() {
    const [lastMessageId, setLastMessageId] = useState(0);
    const [messages, setMessages] = useState([]);

    const addMessage = (body, type="is-primary") => {
        const newMessage = {
            id: lastMessageId + 1,
            type: type,
            body: body
        };
        setLastMessageId(newMessage.id)
        setMessages([...messages, newMessage]);
        return newMessage.id;
    }

    // delete messages after 5 seconds
    useEffect(() => {
        if (!messages.length) return;
        const timer = setTimeout(() => {
            const remainingMessages = [...messages];
            remainingMessages.shift();
            setMessages(remainingMessages);
        }, 5*1000);
        return () => clearTimeout(timer);
    }, [messages]);

    return (
         ...
    );
}
0 голосов
/ 06 августа 2020

какое странное поведение вы видите?
когда я попробовал ваш код, я смог удалить добавленное сообщение через 5 секунд c. 

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  let bodyText = "";
  const [lastMessageId, setLastMessageId] = useState(0);
  const [messages, setMessages] = useState([]);

  const addMessage = (body, type) => {
    if (body === "") return;
    const newMessage = {
      id: lastMessageId + 1,
      type: type,
      body: body
    };
    setLastMessageId(newMessage.id);
    setMessages([...messages, newMessage]);
    bodyText = "";
    return newMessage.id;
  };

  // remove a message with id
  const removeMessage = (id) => {
    const filter = messages.filter((m) => m.id !== id);
    console.log("point 2", filter);
    setMessages(filter);
  };

  // add a new message and then remove it after some seconds
  const addMessageWithTimer = (body, type = "is-primary", seconds = 5) => {
    const id = addMessage(body, type);
    setTimeout(() => removeMessage(id), seconds * 1000);
  };
  console.log("point 1", messages);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input onChange={(e) => (bodyText = e.target.value)} />
      <button onClick={(e) => addMessage(bodyText, "is-primary")}>
        Add messsage
      </button>
      <button onClick={(e) => addMessageWithTimer(bodyText, "is-primary", 5)}>
        Add temp messsage
      </button>
      {messages.map((message, id) => {
        return (
          <div key={id}>
            <p>
              {message.id} {message.body}
            </p>
          </div>
        );
      })}
    </div>
  );
}
0 голосов
/ 06 августа 2020

@ Retsam прав в своем объяснении.

Я думаю, вы столкнетесь с проблемой, если не используете setTimeout в addMessageWithTimer. Не так ли? Но на данный момент это правильно.

Если вы не хотите выставлять таймер на 5 секунд, но при этом хотите, чтобы он работал правильно, установите таймер на 0 секунд. Это все равно будет работать нормально.

...