如何從 useParam 鈎子獲取數據？

Question

我正在使用 react useParams hooks 來獲取 url params id。 在組件AppMessageItems 中，我獲得了 id，但是我如何將此數據發送到getMessages函數以發送到端點。 但是當我嘗試在getMessages函數中獲取 params id 時，react 給出關於使用鈎子無效的錯誤

const AppMessageItems = ( {messages, getMessages} ) => {

        let { id } = useParams();

        console.log(id) // 123

        useEffect( () => {
            const setUserMessageDataToLocalStorage = localStorage.getItem('token');
            getMessages(setUserMessageDataToLocalStorage)
        }, []);

            return (
                <Container>
                        <TabPanelContainer>
                            <TabPanelHeader/>
                            <TabPanelBody />
                            <TabPanelFooter/>
                        </TabPanelContainer>
                </Container>
            )
    };


    const getMessages = (token) => async (dispatch) => {

       // test data
        const all = {
            pass: 'Hello World',
        };

        try {
            const getMessages = await axios.post(API.getUserMessages, {}, {headers: {"Authorization": 'Bearer ' + token}})
            .then(res => res.data);

            dispatch(getMessagesDispatch(all));
        } catch (err) {
            console.log("Error GET_MESSAGES");
        }
    };

Answer 1

正如我評論的那樣。 這是演練：

const AppMessageItems = ( {messages, getMessages} ) => {

        let { id } = useParams();
        const dispatch = useDispatch();

        console.log(id) // 123

        useEffect( () => {
            const setUserMessageDataToLocalStorage = localStorage.getItem('token');
            dispatch(getMessages(setUserMessageDataToLocalStorage, id))
        }, [id, dispatch]);

            return (
                <Container>
                        <TabPanelContainer>
                            <TabPanelHeader/>
                            <TabPanelBody />
                            <TabPanelFooter/>
                        </TabPanelContainer>
                </Container>
            )
    };


    const getMessages = (token, id) => async (dispatch) => {
        // use the id param whereever

       // test data
        const all = {
            pass: 'Hello World',
        };

        try {
            const {data} = await axios.post(API.getUserMessages, {}, {headers: {"Authorization": 'Bearer ' + token}})

            dispatch(getMessagesDispatch(all));
        } catch (err) {
            console.log("Error GET_MESSAGES");
        }
    };