数组中特定对象属性的setState

Question

我希望按钮在单击时将当前filteredTodo的属性“ filter”从true更改为false，但是我在针对所述对象及其属性时遇到问题。

import React, {useState} from 'react';

const Todo = props => {

    const [todos, setTodos] = useState([]);
    const onSubmit = e =>{
        e.preventDefault();
        setTodos([
            ...todos, {
                name :e.target.name.value,
                filter :e.target.filter.value,
            }
        ])
        e.target.name.value = "";
        console.log(todos);
    }
    const onClick = e => {

    }
    return (
        <div>
            <div>
                <form onSubmit={onSubmit}>
                    <input type="text" placeholder="Get MERN black belt" name="name"/>
                    <input type="hidden" name="filter" value="true"/>
                    <button type="submit">Add</button>
                </form>
            </div>
            {todos.filter(todo=>todo.filter.includes("true")).map((filteredTodo,i) =>(
                <div key={i}>
                    <label>{filteredTodo.name}</label>
                    <input type="checkbox"/>
                    <button onClick={onClick} name="filter" type="submit">Delete</button>
                </div>
            ))}
        </div>
    );
}
export default Todo;

Answer 1

而不是os过滤和映射，您可以简单地根据过滤条件映射和返回元素。这样，您就可以依靠从地图获得的index属性来更新点击时待办事项，因为您没有与待办事项相关联的唯一ID

const Todo = props => {

    const [todos, setTodos] = useState([]);
    const onSubmit = e =>{
        e.preventDefault();
        setTodos([
            ...todos, {
                name :e.target.name.value,
                filter :e.target.filter.value,
            }
        ])
        e.target.name.value = "";
        console.log(todos);
    }
    const onClick = index => {
       setTodos(prev => [...prev.slice(0, index), {...prev[index], filter: false}, ...prev.slice(index + 1)]);
    }
    return (
        <div>
            <div>
                <form onSubmit={onSubmit}>
                    <input type="text" placeholder="Get MERN black belt" name="name"/>
                    <input type="hidden" name="filter" value="true"/>
                    <button type="submit">Add</button>
                </form>
            </div>
            {todos.map((filteredTodo,index) =>{
             if(odo.filter.includes("true")) {
               return (<div key={i}>
                    <label>{filteredTodo.name}</label>
                    <input type="checkbox"/>
                    <button onClick={() => onClick(index)} name="filter" type="submit">Delete</button>
                </div>
               )
             }
             return null; // returning null will not render anything
            })}
        </div>
    );
}
export default Todo;

但是我建议您在创建待办事项时生成唯一的ID，以便可以唯一地标识待办事项。通过提供唯一的id作为从map返回的div元素的键，它还将帮助您进行渲染优化。