数组中特定对象属性的 setState

Question

我希望该按钮在单击时将当前filteredTodo 的属性“过滤器”从真更改为假，但我在定位所述对象及其属性时遇到问题。

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

您可以简单地根据过滤条件映射并返回元素，而不是过滤和映射。这样你就可以依靠从 map 获得的 index 属性来更新点击时的 todo，因为你没有任何与 todos 关联的唯一 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 作为从地图返回的 div 元素的键来帮助您进行渲染优化

Answer 2

解决了！感谢How do I update states onchange in an array of object in React Hooks

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 = i => e => {
        let newArr = [...todos];
        newArr[i].filter = "false";
        setTodos(newArr);
    }
    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(i)} type="submit">Delete</button>
                </div>
            ))}
        </div>
    );
}
export default Todo;