时间戳

首页 > 解决方案 > UseState 不保存用户输入

javascript - UseState 不保存用户输入

问题描述

我正在使用 useState 处理待办事项应用程序，我尝试保存用户输入，然后在他们单击提交后将其推送到 listArray，稍后显示它......我认为我在 updateArray 函数中做错了，但我可以似乎明白了什么。

import React, { useState } from "react";

function App() {
  const listArray = [""];

  const [list, updateList] = useState("");

  function handleChange(event) {
    const { name, value } = event.target;

    updateList(value);
    //console.log(list);
  }
  
  function updateArray() {
    console.log(list);

    listArray.push(list);
    console.log(listArray);
  }

  return (
    <div className="container">
      <div className="heading">
        <h1>To-Do List</h1>
      </div>
      <div className="form">
        <input name="entry" onChange={handleChange} type="text" />
        <button>
          <span onSubmit={updateArray}>Add</span>
        </button>
      </div>
      <div>
        <ul>
          <li>{listArray[0]}</li>
        </ul>
      </div>
    </div>
  );
}

export default App;

标签： javascriptreactjsreact-hooksuse-state

解决方案

将当前值保存到状态中，并将列表也保存到状态中，这样它就不会在每个渲染周期中被清除。

import React, { useState } from "react";

function App() {
  const [list, updateList] = useState([]);
  const [currentValue, setCurrentValue] = useState()

  function handleChange(event) {
    setCurrentValue(event.target.value)
  }

  function handleClick() {
    updateList([...list, currentValue])
  }

  return (
    <div className="container">
      <div className="heading">
        <h1>To-Do List</h1>
      </div>
      <div className="form">
        <input name="entry" onChange={handleChange} type="text" />
        <button type="button" onClick={handleClick}>
          <span>Add</span>
        </button>
      </div>
      <div>
        <ul>
          {list.map((res) => (
            <li key={res}>{res}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

此外，将onClick移至按钮在语义上（甚至对于 UX）更有意义，但这取决于您。

推荐阅读