0

我从 jsonplaceholder.typicode 获取了一个待办事项数据，并使用 redux 获取该数据设置了一个操作（我使用 thunk 中间件）。我成功地将数据从 jsonplaceholder 获取到我的组件，并在 reducer 中添加了一个用于切换 todos 的逻辑：

//initState is { todos: [] }
case TOGGLE_TODO: 
  return {
    ...state,
    todos: state.todos.map(todo => {
      if (todo.id === action.payload) {
        return {
          ...todo, completed: !todo.completed
        }
      }
      return todo
    })
  }

但问题是当我使用复选框切换待办事项时，“line-through”样式由于某种原因闪烁（它显示文本中的罢工，但在我认为 0.5 秒后消失）这就是为什么我需要了解它为什么会发生，是因为我在网上找的吗？还是逻辑有问题？对不起我的菜鸟问题。

这是我的 Todo 组件：

const dispatch = useDispatch()
const strikeStyle = {
  textDecoration: todo.completed ? 'line-through' : ''
} 

const onChangeHandler = () => {
 dispatch(toggleTodo(todo.id))
}

...
<label>
    <input onChange={onChangeHandler} type='checkbox' />
    <p style={strikeStyle}>{todo.title}</p>
</label>
4

1 回答 1

0

我只是在我的 useEffect 中添加了一个括号，因为如果我没有添加一个括号，我认为它会继续获取数据并保持所有数据的默认值，这就是它闪烁的原因。

const dispatch = useDispatch()
const todos = useSelector(state => state.TodoReducer.todos)

useEffect(() => {
 dispatch(fetchTodoData())
}, [])

return (
  <div>
    {todos.map(todo => <Todo key={todo.id} todo={todo}/>)}
  </div>
于 2020-07-22T18:05:53.183 回答