React Hooks，useState 相关问题。如何更新对象的一个​​属性并保留其余的

Question

我想用挂钩做一个待办事项列表。这是我的相关代码。function generateId() {  return '_' + Math.random().toString(36).substr(2, 9);};export function TodoList(){  const [todos, setTodos] = React.useState([])  const [input, setInput] = React.useState('')  const [time, setTime] = React.useState('')  const handleSubmit = () => {    setTodos((todos) => todos.concat({      text: input,      id: generateId(),      timeRequired: time,    }))    setInput('')    setTime('')  }  // remove to do works fine.  const removeTodo = (id) => setTodos((todos) => todos.filter((todo) => todo.id !== id ))  /// confusion here   let todo = (id) => todos.find(x => x.id = id)  const decrement = (id) => setTodos((todo(id).timeRequired) => timeRequired - 1)   ///   return(    <React.Fragment>      <input type="text" value={input} placeholder="New Task" onChange={(e) => setInput(e.target.value)}>       </input>      <input type="number" value={time} placeholder="Hours Required" onChange={(e) => setTime(e.target.value)}>      </input>      <button onClick={handleSubmit}> Submit </button>      <ul>        {todos.map(({text, id, timeRequired}) => (          <li key={id}>            <span>{text}: remaining {timeRequired} hours </span>             <button onClick={() => removeTodo(id)}>               Cancel ❌             </button>            <button onClick={() => decrement(id)}> Decrement ➖ </button>             <button > Increase ➕ </button>             <button> Done ✔️ </button>          </li>        ))}      </ul>    </React.Fragment>  )}所以我想增加/减少待办事项列表上的剩余时间。但是，我不知道如何选择列表中的特定项目并更改一个属性（剩余时间）并保留文本属性。

Answer 1

下面是该decrement函数的外观。这需要id, 循环遍历所有todos. 如果 atodo与提供的不匹配，id请保持原样。如果确实匹配，则创建对象的浅表副本 ( ) 并使用更新后的值{...todo}覆盖该属性。timeRequired

const decrement = (id) => setTodos((todos) => todos.map((todo) => {

  if (todo.id != id) return todo;

  return {...todo, timeRequired: todo.timeRequired - 1};

}));

请注意，顺序{...todo, timeRequired: todo.timeRequired - 1}很重要。通过放置在它将覆盖现有属性timeRequired: todo.timeRequired - 1之后。...todo就像 object{a: 1, b: 2, a: 3}会把 object 留给你一样{a: 3, b: 2}，因为 key 的第二个定义a覆盖了第一个。

Answer 2

你可以这样试试

  const decrement = (id) => {

    

    const targetTodo = todos.find(x => x.id == id);  //get the todo

    const currentTime = targetTodo.timeRequired -1 //decrease the time 

    

    const newTodo = { ...targetTodo , timeRequired : currentTime } // create new todo object

    

    const newTodoList = todos.map( item => { // finally replace the old todo object

        if(item.id = id)  return newTodo

        else return item;

    })

    

    setTodos(newTodoList) 

  }

Answer 3

识别数组中的元素后，从 todo 创建一个具有递减timeRequired属性的新对象。然后使用.slice在新项前后对数组进行切片，新项在中间：

const decrement = (i) => {

    const replacedTodo = {

        ...todos[i],

        timeRequired: todos[i].timeRequired - 1,

    };

    setTodos(

        todos.slice(0, i),

        replacedTodo,

        todos.slice(i + 1),

    );

};

{todos.map(({ text, id, timeRequired }, i) => (

  // ...

  <button onClick={() => decrement(i)}> Decrement ➖ </button>

.map直接使用函数中的索引比稍后从 ID 中查找匹配元素更容易。

Answer 4

尝试这个...

const removeTodo = (id) => setTodos((todos) => todos.filter((todo) => todo.id !== id ))

const decrement = (id) => setTodos((todos) => todos.map((todo) => {

  const {

    id: oldID,

    timeRequired,

  } = todo;

  return {

    ...todo,

    timeRequired: id===oldID? timeRequired-1 : timeRequired, 

  };

}));