Устаревшие данные после использования ловушки useState - PullRequest
0 голосов
/ 08 февраля 2020

Я пытаюсь использовать библиотеку реактивных упоминаний, в которой есть функция onAdd в качестве реквизита, который срабатывает, когда пользователь выбирает значение из предложенных предложений. Я использовал зацепки для того же самого, но когда я установил значение комментария, данные устарели внутри функции onAdd, даже если они вызываются после запуска события onChange. Вот фрагмент кода для того же

import React, { useState, useEffect } from "react";
import { MentionsInput, Mention } from "react-mentions";

const MyComponent = props => {
  let [comment, setComment] = useState("");

  function onAdd(id, display) {
    // Do something here
    console.log("Comment inside onAdd: ", comment);
  }

  function handleCommentChange(e) {
    // Handle the changes in the textArea
    console.log("from handleCommentChange: ", e.target.value);
    setComment(e.target.value);
  }

  function renderSuggestion(entry, search, highlightedDisplay, index, focused) {
    // Modify the suggestion dropdown by returning valid JSX
    return (
      <>
        <span>{entry.display}</span>
      </>
    );
  }

  function handleSubmitComment(e) {
    e.preventDefault();
    // Do something to submit comment
  }

  return (
    <>
      <MentionsInput
        markup="@[__display__](__id__)"
        value={comment}
        onChange={handleCommentChange}
        placeholder={"Mention people using '@'"}
      >
        <Mention
          trigger="@"
          data={[{
  id: "1",
  display: "Jimmy"
},
{
  id: "2",
  display: "Ketut"
},
{
  id: "3",
  display: "Gede"
}]}
          renderSuggestion={renderSuggestion}
          onAdd={onAdd}
          appendSpaceOnAdd={true}
        />
      </MentionsInput>

      <button onClick={handleSubmitComment}>Comment</button>
    </>
  );
};

export default MyComponent;

Теперь, когда я проверяю из файла handleCommentChange console.log, он имеет значение @Jimmy, если я выбираю Jimmy, но внутри функции onAdd это все равно @

Который был предыдущим значением комментария, а не текущим значением. Я новичок в реакции хуков и хотел бы знать, что мне здесь не хватает?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...