將 Class 組件轉換為功能組件 React

Question

我正在嘗試將一個 class 組件轉換為功能組件，我可以按照一些步驟進行操作，但我不確定如何更改代碼的 rest 以使其工作。 我不清楚的部分是刪除setState 。 我也會在這個問題的末尾添加我到目前為止所做的事情。

Class 組件：

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        newTodoName: '',
        todos: todos
    };
}

generateNewId() {
    return this.state.todos.length + 1;
}

onSubmit(event) {
    event.preventDefault();

    var newTodos = this.state.todos.slice();
    newTodos.push({
        id: this.generateNewId(),
        name: this.state.newTodoName,
        complete: false
    });

    this.setState({todos: newTodos, newTodoName: ''});
}

onClick(id) {
    var todoItems = this.state.todos.slice();
    for (let i = 0; i < this.state.todos.length; i++) {
        if (todoItems[i].id === id) {
            var newComplete = !todoItems[i].complete;
            todoItems[i].complete = newComplete;
        }
    }

    this.setState({
        todos: todoItems
    });
}

onChange(event) {
    this.setState({newTodoName: event.target.value});
}

到目前為止我做了什么：

function App(props) {

const [newTodoName,setName] = useState("");
const [todos,setArray] = useState(todos);


const generateNewId() = () => {
    return setArray(todos.length + 1)
}

const onSubmit() = (event) => {
    event.preventDefault();

    var newTodos = todos.slice();
    var id =
    newTodos.push({
        id: generateNewId(),
        name: newTodoName,
        complete: false
    });

    this.setState({todos: newTodos, newTodoName: ''});
}

  const onClick() = (id) => {
    var todoItems = todos.slice();
    for (let i = 0; i < todos.length; i++) {
        if (todoItems[i].id === id) {
            var newComplete = !todoItems[i].complete;
            todoItems[i].complete = newComplete;
        }
    }

    this.setState({
        todos: todoItems
    });
}

const onChange() = (event) =>{
    this.setState({newTodoName: event.target.value});
}

如何將此 class 組件轉換為功能組件？

Answer 1

你的狀態應該這樣聲明

const [newTodoName, setNewTodoName] = useState("");
const [todos, setTodos] = useState(todoProps);

如果要更改 state，則不應使用this.setState(...) ，但是

setNewTodoName("your string")
setTodos(YourTodos)

編輯：這是您的代碼轉換。

https://codesandbox.io/s/crazy-sid-09myu?file=/src/App.js:0-2376