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

Question

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. Right now i have to manually refresh the page to see the updated 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 will automatically re-render the component when the state changes. You do not have to do anything special to get that behavior. What you are describing is what should happen automatically.

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

This means that you have a mutation in your reducer. You are probably mutating the existing activities array instead of (or in addition to) returning a new array.

Either that or your deleteActivityAction doesn't actually do anything and returns the same array.