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

Question

我想做一个带有 Hook 的待办事项列表。这是我的相关代码。

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。如果 todo 与提供的 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 之后，它将覆盖现有属性。就像对象 {a: 1, b: 2, a: 3} 会给你留下对象 {a: 3, b: 2}，因为第二个键 a 的定义覆盖了第一个。