索引为1的todos数组总是被更改，并且数组不会进一步移动- React-Typescript

Question

我正在使用typescript-react创建一个待办事项列表，但我的代码似乎无法工作。

App.tsx：

import { useState } from "react";
import "./App.css";

export default function App() {
  let id = 0;
  const [todoInput, setTodoInput] = useState("");

  let todos: string[] = ["Arbit"];

  const handleSubmit = (e: any) => {
    e.preventDefault();
    todos.push(todoInput);
    console.log(todos)
    setTodoInput("");
    id += 1;
    // console.log(todos);
    // console.log(todos[id])
    // console.log(e.target[0].value);
    // todos.push(e.target[0].value);
    // console.log(e)
  };
  return (
    <div className='App'>
      <form onSubmit={handleSubmit}>
        <input
          type='text'
          value={todoInput}
          onChange={(e) => setTodoInput(e.target.value)}
        />
        <button>Submit</button>
      </form>

      <ul>
        {todos.map((todo) => (
          <li key={id}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

待办事项数组不会推送todoInput。相反，它省略了todos1。我在一个文件中创建我的应用程序。

Answer 1

在react函数中，您必须使用钩子，以便在重新呈现时保留状态。在这种情况下，您需要将todos数组转换为const [todos, setTodos] = React.useState()，并使用setTodos函数以函数式方式更新它。

  const [todos, setTodos] = React.useState([]);
  // also use useState for ids
  const [id, setId] = React.useState(0);
  const handleSubmit = (e: any) => {
    e.preventDefault();
    setTodos([...todos, todoInput]);
    console.log(todos)
    setTodoInput("");
    setId(id + 1);
  };

Answer 2

我不确定，但我认为您也需要将数组设置为状态：

import { useState } from "react";
import "./App.css";

export default function App() {
  let id = 0;
  const [todoInput, setTodoInput] = useState("");

  const [todos, setTodos] = useState(["Arbit"]);

  const handleSubmit = (e: any) => {
    e.preventDefault();
    todos.push(todoInput);
    console.log(todos)
    setTodoInput("");
    setTodos(todos);
    id += 1;
    // console.log(todos);
    // console.log(todos[id])
    // console.log(e.target[0].value);
    // todos.push(e.target[0].value);
    // console.log(e)
  };
  return (
    <div className='App'>
      <form onSubmit={handleSubmit}>
        <input
          type='text'
          value={todoInput}
          onChange={(e) => setTodoInput(e.target.value)}
        />
        <button>Submit</button>
      </form>

      <ul>
        {todos.map((todo) => (
          <li key={id}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

如果它不起作用，我很抱歉。