索引 1 处的待办事项数组总是会更改，并且数组不会进一步移动 - React-Typescript

Question

我正在使用typescript react创建Todo列表，但我的代码似乎不起作用。

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>
);
}

todos数组不会推送todoInput。相反，它省略了todos[1]。我正在一个文件中创建我的应用程序。

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>
);
}

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