如何使用 React 鈎子將我的 Todo 組件數據傳遞到我的 Todolist 組件中？

Question

這是一個鏈接https://codesandbox.io/s/fast-architecture-45u4m?file=/src/Todo.js

我添加了注釋，顯示我試圖將哪些代碼移到單獨的組件中。

所以我有這個 todo 應用程序，原始代碼在一個名為 TodoList.js 的組件中包含我的所有功能和邏輯

我正在嘗試重構我的代碼，以便 todo 的所有邏輯都在一個名為 Todo.js 的單獨組件中

這是代碼的樣子

 <>
      {todos.map(todo => (
        <div className='todo-row'>
          <div
            key={todo.id}
            className={todo.isComplete ? 'complete' : ''}
            key={todo.id}
            onClick={() => completeTodo(todo.id)}
          >
            {todo.text}
          </div>
          <FaWindowClose onClick={() => removeTodo(todo.id)} />
        </div>
      ))}
    </>

所以我有這個 TodoList.js 組件和我所有的狀態和函數，但是當我試圖刪除我的 todo 代碼時，我似乎無法弄清楚如何重構它，所以仍然傳遞相同的數據，我能夠再次使用我的所有功能

      function TodoList() {
        const [todos, setTodos] = useState([]);

        const addTodo = todo => {
          if (!todo.text || /^\s*$/.test(todo.text)) {
            return;
          }

          const newTodos = [todo, ...todos];

          setTodos(newTodos);
          console.log(newTodos);
        };

        const removeTodo = id => {
          const removedArr = [...todos].filter(todoId => todoId.id !== id);

          setTodos(removedArr);
        };

        const completeTodo = id => {
          let updatedTodos = todos.map(todo => {
            if (todo.id === id) {
              todo.isComplete = !todo.isComplete;
            }
            return todo;
          });
          setTodos(updatedTodos);
        };

        return (
          <>
            <TodoForm onSubmit={addTodo} />
            <Todo />
          </>
        );
      }

      export default TodoList;

最初，我用上面第一個塊中顯示的代碼替換了組件<Todo /> 。 但是現在我想將所有這些代碼移動到它自己的名為 Todo.js 的組件中，然后從那里傳入它，但是我遇到了錯誤，因為我在 TodoList.js 組件中擁有我的所有函數和狀態邏輯

Answer 1

您可以通過TodoList組件中的 props 將數據和所需的函數傳遞給Todo組件，並且 Todo 組件應該按照名稱僅代表 Todo 項，因此地圖應保留在 TodoList 組件中，以便在更改后

TodoList.js

  function TodoList() {
    const [todos, setTodos] = useState([]);

    const addTodo = todo => {
      if (!todo.text || /^\s*$/.test(todo.text)) {
        return;
      }

      const newTodos = [todo, ...todos];

      setTodos(newTodos);
      console.log(newTodos);
    };

    const removeTodo = id => {
      const removedArr = [...todos].filter(todoId => todoId.id !== id);

      setTodos(removedArr);
    };

    const completeTodo = id => {
      let updatedTodos = todos.map(todo => {
        if (todo.id === id) {
          todo.isComplete = !todo.isComplete;
        }
        return todo;
      });
      setTodos(updatedTodos);
    };

    return (
      <>
        <TodoForm onSubmit={addTodo} />
        {
             todos.map(todo => <Todo to do = {todo} removeTodo={removeTodo} completeTodo={completeTodo}/>)
        }
      </>
    );
  }

  export default TodoList;

和 Todo.js

const {todo} = props;
return (
    <div className='todo-row'>
      <div
        key={todo.id}
        className={todo.isComplete ? 'complete' : ''}
        key={todo.id}
        onClick={() => props.completeTodo(todo.id)}
      >
        {todo.text}
      </div>
      <FaWindowClose onClick={() => props.removeTodo(todo.id)} />
    </div>
);
 

Answer 2

根據您的沙箱。 你只需要傳遞道具：

待辦事項.js

// I want to move this code into this component
import React from "react";

import { FaWindowClose } from "react-icons/fa";

const Todo = ({ todos, completeTodo, removeTodo }) => {
  return todos.map((todo) => (
    <div className="todo-row">
      <div
        key={todo.id}
        className={todo.isComplete ? "complete" : ""}
        onClick={() => completeTodo(todo.id)}
      >
        {todo.text}
      </div>
      <FaWindowClose onClick={() => removeTodo(todo.id)} />
    </div>
  ));
};

export default Todo;

TodoList.js

import React, { useState } from "react";
import TodoForm from "./TodoForm";
import Todo from "./Todo";
import { FaWindowClose } from "react-icons/fa";

function TodoList({ onClick }) {
  const [todos, setTodos] = useState([]);

  const addTodo = (todo) => {
    if (!todo.text || /^\s*$/.test(todo.text)) {
      return;
    }

    const newTodos = [todo, ...todos];

    setTodos(newTodos);
    console.log(newTodos);
  };

  const removeTodo = (id) => {
    const removedArr = [...todos].filter((todoId) => todoId.id !== id);

    setTodos(removedArr);
  };

  const completeTodo = (id) => {
    let updatedTodos = todos.map((todo) => {
      if (todo.id === id) {
        todo.isComplete = !todo.isComplete;
      }
      return todo;
    });
    setTodos(updatedTodos);
  };

  return (
    <>
      <TodoForm onSubmit={addTodo} />
      {/* I want to move this code below into a new component called Todo.js */}
      <Todo todos={todos} completeTodo={completeTodo} removeTodo={removeTodo} />
    </>
  );
}

export default TodoList;

這是演示： https : //codesandbox.io/s/nostalgic-silence-idm21?file=/ src/TodoList.js: 0-1039