在useEffect之后如何使用更新的数据渲染组件，useEffect从API获取数据答案

【问题标题】：How can I render Component with updated data after useEffect, the useEffect fetches data from an API在useEffect之后如何使用更新的数据渲染组件，useEffect从API获取数据
【发布时间】：2021-06-30 03:17:24
【问题描述】：

基本上我想要做的代码是在我单击删除按钮后，它将重新呈现 ActivityListScreen，删除的 Activity 现在已在列表中消失，而无需刷新页面。现在我必须手动刷新页面才能看到更新的 ActivityListScreen

const ActivityListScreen = ({ history }) => {

const dispatch = useDispatch()

const getActivities = useSelector(state => state.getActivities)
const { activities, loading } = getActivities

const deleteActivity = useSelector(state => state.deleteActivity)
const { loading: del } = deleteActivity

useEffect(() => {
    if (activities) {
        dispatch(getActivitiesAction())
    }
}, [dispatch])

const deleteHandler = (id) => {
    dispatch(deleteActivityAction(id))
}

return (

    <FormContainer>
        <Row>
            <Col className='d-flex '>

                <LinkContainer to='/add'>
                    <Button className='ml-auto mb-3 btn-sm'>Add Activity</Button>
                </LinkContainer>
            </Col>
        </Row>
        {loading ? <h4>Please wait...</h4> : (
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Activity Name</th>
                        <th>Description</th>
                        <th>Date Created</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {activities && activities.map((activity) => (
                        <tr key={activity._id}>
                            <td>*</td>
                            <td>{activity.name}</td>
                            <td>{activity.description}</td>
                            <td>{moment(activity.createdAt).format('MMMM DD, YYYY')}</td>
                            <td className='d-flex justify-content-between border-0'><span><i className='fas fa-trash-alt' onClick={() => deleteHandler(activity._id)}></i></span>
                                <LinkContainer to={`edit/${activity._id}`}>
                                    <span><i className='fas fa-edit'></i></span>
                                </LinkContainer>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </Table>
        )}
    </FormContainer>
)
}

export default ActivityListScreen

【问题讨论】：

您的问题缺少许多需要理解的重要代码片段，例如 deleteActivityAction。请通过代码沙箱添加完整的工作代码或添加缺失的部分

标签： reactjs redux action use-effect

【解决方案1】：

基本上我想要做的代码是在我单击删除按钮后，它将重新呈现 ActivityListScreen，删除的 Activity 现在已在列表中消失，而无需刷新页面。

useSelector 会在状态改变时自动重新渲染组件。你不必做任何特别的事情来获得这种行为。您所描述的是应该自动发生的事情。

现在我必须手动刷新页面才能看到更新的 ActivityListScreen

这意味着你的 reducer 中有一个突变。您可能正在改变现有的 activities 数组，而不是（或除此之外）返回一个新数组。

那个或者你的deleteActivityAction实际上并没有做任何事情并返回相同的数组。

【讨论】：

useSelector 会自动重新渲染组件，即使我没有放入依赖数组？
是的！ useSelector 没有依赖数组。