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

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

Basically what the code I want to do is after I click delete button it will re render the ActivityListScreen with the deleted Activity now gone in the list without refreshing the page.

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

Right now I have to manually refresh the page to see the updated ActivityListScreen

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

要么那个，要么你的 deleteActivityAction 实际上没有做任何事情， returns 同一个数组。

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

How can I render Component with updated data after useEffect, the useEffect fetches data from an API

action

reactjs

redux

use-effect