Question

基本上我想要做的代码是在我单击删除按钮后，它将重新呈现 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

Answer 1

<块引用>

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

useSelector 会在状态改变时自动重新渲染组件。您无需执行任何特殊操作即可获得该行为。您所描述的是应该自动发生什么。

<块引用>

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

这意味着您的减速器发生了突变。您可能正在改变现有的 activities 数组，而不是（或除了）返回一个新数组。

无论是那个还是您的 deleteActivityAction 实际上都没有做任何事情并返回相同的数组。

如何在 useEffect 之后使用更新的数据呈现组件，useEffect 从 API 获取数据

1 个答案: