UseState不保存用户输入[重复]

Question

我正在使用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;

Answer 1

listary在每次重新加载时都会被清除。您应该将数据存储在状态中。所以

const[listArray， setListArray]=useState（[]）

和updateArray应该如下所示：

function updateArray() {
    setListArray([...listArray, list]);
}

我想，在updateArray函数中应该有一些逻辑来清除列表

Answer 2

将当前值保存到状态中，并将列表保持在状态中，以便在每个渲染周期中不会清除该列表。

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移动到按钮在语义上（甚至对于用户体验）更有意义，但这取决于您。

Answer 3

您当前的代码有几个问题，我将简要描述并提供解决方案来解决这些问题。

1. 您的函数运行良好，并且符合预期，但是在React应用程序中，很少有方法可以重新呈现页面或组件，并且更改局部变量不是其中之一。因此，您需要使用本地状态而不是本地listArray变量。既然已经有一种状态，你应该定义另一种状态，或者把你的当前状态作为一个对象，把你的组件相关状态放在一个地方，我将采用第二种方法，因为它更优雅、更干净。

const [state, setState] = useState({ list: [], input: "" });

setState((prev) => ({ ...prev, input: value })); // immediate return "({})" of an object with iterating through the previous values "...prev" and updating input "input: value"

注意：您可以在此处阅读有关扩展运算符（…）的更多信息。

因此，您的句柄和updateArray函数如下所示：

function handleChange(event) {
  const { value } = event.target;
  setState((prev) => ({ ...prev, input: value }));
}

function updateArray() {
  setState((prev) => ({ ...prev, list: [...state.list, state.input] }));
}

<button onClick={updateArray}> <!-- It's better to assign onclick action to an element with a function or arrow function to prevent it from running in the first render "(event) => updateArray(event)" -->
  <span>Add</span> 
</button>

<ul>
  {state.list.map((item, index) => (
      <li key={index}>{item}</li>
  ))}
</ul>

工作演示：