'Line-through' 样式在反应中由于某种原因闪烁

Question

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

//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' 样式由于某种原因闪烁（它在文本中显示罢工但在我认为 .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>

Answer 1

我只是在我的 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>

'Line-through' 样式在反应中由于某种原因闪烁

'Line-through' style in react blinking for some reason

javascript

css

line-through

reactjs

redux