反应钩子：输入onChange第一个字符不能删除

Question

我有一些输入来创建/更新公式，

1）如果 value={question}，一切正常，除了我不能删除最后一个字符（=输入的第一个字符）

2）如果我不提及值，那一切都很好，除了当我想用雪佛龙图标按钮更改问题顺序时，数据库已经很好地改变了，但输入值仍然显示在最后一个地方。

<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 但也不起作用

好的，我找到了一些东西，但它是一个 McGyver 提示，不是很干净：在所有新添加问题之前添加一个空格啊啊。但后来我再也看不到我的占位符了：/

仅供参考：问题来自 questions.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]);

        }

      }

感谢您的宝贵帮助

Answer 1

问题可能来自于 useEffect 中的条件：当您要删除字符串的最后一个字符时，updatedQuestion 的状态为空，因此不执行条件