Реакция хуков: ввод onChange первого символа не может быть удален

Question

У меня есть некоторые входы для создания / обновления формул,

1) если значение = {вопрос}, все работает, за исключением того, что я не могу удалить последний символ (= первый символ ввода)

2) если я не упоминаю значение, это все хорошо, за исключением случаев, когда я хочу изменить порядок вопросов с помощью кнопки со значком Chevron, база данных хорошо изменяется, но входное значение по-прежнему отображается на последнем месте.

<input
        type="text"
        value={question}
        placeholder="blabla"
        onChange={event => {
          event.preventDefault();
         const value = event.target.value;
         setUpdatedQuestion(value);
        }}
      />

Я пытался добавить if (event.target.value == "" || event.target.value) в onChange, но тоже не работает

ОК Я нашел что-то, но это совет МакГайвера, не очень чисто: добавление одного пробела перед всем новым добавить вопрос ахах. Но тогда я больше не вижу своего заполнителя: /

К вашему сведению: вопрос исходит от вопросов.map, setUpdatedQuestion обновлять вопросы, newOrder также обновляет вопросы

//in QuestionsContent.js (questions is a questions tab)
const QuestionsContent = props => {
return (
    <form onSubmit={onSubmit}>
      {isLoading === false && questions.length > 0
        ? questions.map((question, i) => {
            return (
              <div key={i}>
                <QuestionLine
                  {...question}
                  questions={questions}
                  setQuestions={setQuestions}
                  setNewOrder={setNewOrder}
                />
              </div>
            );
          })
        : null}

        <button 
          onClick={event => {
            event.preventDefault();
            setAddQuestion({
              question: null,
              type: "texte"
            });
          }}
        >
         Add a question
        </button>
</form>
);
};

//in QuestionLine.js:

const QuestionLine = ({
  question,
  setNewOrder,
  setQuestions,
  questions
}) => {
  const [updatedQuestion, setUpdatedQuestion] = useState("");

  // * UPDATE QUESTION *******************************
  useEffect(() => {
    if (updatedQuestion !== "") {
      const tab = [];

      for (let j = 0; j < questions.length; j++) {
        if (j === i) {
          const newObject = {
            question: updatedQuestion,
            type: type
          };
          console.log("adding updatedQuestion ===>", newObject);
          tab.push(newObject);
        } else {
          tab.push(questions[j]);
        }
      }
      setQuestions(tab);
      setUpdatedQuestion("");
    }
  }, [updatedQuestion]);

  return (
    <div >

      {/* QUESTION */}

      <input
        type="text"
        value={question}
        placeholder="blabla"
        onChange={event => {
          event.preventDefault();
         const value = event.target.value;
         setUpdatedQuestion(value);
        }}
      />   
    </div>
  );
};

спасибо за ваша драгоценная помощь

Answer 1

Проблема, вероятно, связана с условием в useEffect: когда вы хотите удалить последний символ строки, состояние updatedQuestion пустое и, следовательно, условие не выполняется