反应功能组件-遵循父组件状态

Question

我是新的反应，我正在尝试组件功能的风格。我有简单的待办事项清单。我想使用style属性从列表中删除todo项。从Chrome调试模式中，我看不到对复选框更改的即时反应，而且该项也没有删除。。。对我来说，这是如何管理组件状态的问题。我希望得到一些指导。

App.js

import React, {useState} from 'react';
import Todos from "./components/Todos";

import './App.css'

const App = () => {
    const [todos, setTodos] = useState(
        [
            {id: 1, title: 'Take out the trash', completed: false},
            {id: 2, title: 'Dinner with wife', completed: false},
            {id: 3, title: 'Meeting boss', completed: false}
        ]
    );

    const markComplete = id => {
        console.log((new Date()).toString());

        todos.map(todo => {
            if (todo.id === id) {
                todo.completed = ! todo.completed;
            }
            return todo;
        });
        setTodos(todos);
    };

    return (
        <div className="App">
            <Todos todos={todos} markComplete={markComplete}/>
        </div>
    );
};

export default App;

Todos.js

import React from "react";
import TodoItem from "./TodoItem";

const Todos = ({todos, markComplete}) => {
    return (
        todos.map(todo => (
            <TodoItem key={todo.id} todoItem={todo} markComplete={markComplete} />
        ))
    );
};

export default Todos;

TodoItem.js

import React from "react";

const TodoItem = ({todoItem, markComplete}) => {
    const getStyle = () => {
        console.log("style: " + todoItem.completed);
        return {
            background: '#f4f4f4',
            padding: '10px',
            borderBottom: '1px #ccc dotted',
            textDecoration: todoItem.completed ? 'line-through' : 'none'
        }
    };

    return (
        <div style={getStyle()}>
            <p>
                <input type="checkbox" onChange={markComplete.bind(this, todoItem.id)}/>{' '}
                {todoItem.title}
            </p>
        </div>
    );
};

export default TodoItem;

我希望这个getStyle（）将遵循状态。。。以某种方式

Answer 1

rray.prototype.map（）返回一个新的数组，您正在丢弃它。您需要使用新的数组，例如：

const markComplete = id => {
  ...
  setTodos(totos.map(...))

Answer 2

不要改变状态。在函数中，您将直接修改todos数组。像这样改变你的功能以避免突变

const markComplete = id => {
   console.log((new Date()).toString());
   let newTodos = todos.map(todo => {
       let newTodo = { ...todo };
       if (newTodo.id === id) {
           newTodo.completed = !newTodo.completed;
       }
       return newTodo;
    });
    setTodos(newTodos);
};