reactjs - useEffect hook 不会重新渲染元素

Question

我对 useEffect 有疑问，希望它重新渲染元素网格，当此网格中的元素被删除并且包含该元素数据的变量已更改时，使用效果指的是此变量，所以我希望它重新渲染它放置的网格。

const TasksView = ({current, tasksViewTriggered, cancelModals, addTaskToNote}) => {
  const [tasks, setTasks] = useState([])

  const onAddTask = () => {
    addTaskToNote(current.id, '', false)
  }

  const onCancel = () => {
    cancelModals()
  }

  useEffect(() => {
    console.log('current was changed')
    if (current) {
      setTasks(current.tasks)
    }
  }, [current, tasksViewTriggered])

  return (
    <div className={`tasks-modal ${tasksViewTriggered ? '' : 'invisible'}`}>
      <div className='taskModalContent'>
        <div className="tasks-grid">
          {tasks.length === 0 ? (<p className='center'>No tasks to show</p>) : (
            tasks.map(task => <Task task={task} key={task.id}/>)
          )}
        </div>
      </div>

      <div className='modalFooter'>
        <a href='#!' onClick={onCancel} className='btn btn-red'>
          Close
        </a>
        <a href='#!' onClick={onAddTask} className='btn btn-green'>
          Add Task
        </a>
      </div>
    </div>
  );
};

TasksView.propTypes = {
  current: PropTypes.object,
  tasksViewTriggered: PropTypes.bool.isRequired,
  cancelModals: PropTypes.func.isRequired,
  addTaskToNote: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  current: state.note.current,
  tasksViewTriggered: state.note.tasksViewTriggered
})

export default connect(
  mapStateToProps,
  {cancelModals, addTaskToNote}
)
(TasksView);

当前值在任务删除时发生变化，我希望此页面在之后重新呈现，但它不会发生。

Answer 1

  useEffect(() => {
    console.log('current was changed')
    if (current) {
      setTasks(current.tasks)
    }
  }, [current.tasks, tasksViewTriggered])

确保 current 不会为空