無法使用功能組件從子級更新父狀態

Question

我的 React 應用程序有問題。 我正在嘗試根據子組件的值設置父組件的狀態。 我可以在開發工具和日志窗口中看到父級正在接收子級的值； 然而， setState 並沒有像它應該的那樣工作。 我嘗試創建一個單獨的函數來設置值； 希望它充當中間件，但沒有運氣。

我已經經歷了幾個 StackOverflow 線程，但沒有多少線程可以滿足功能組件的需求。 我找到了以下 codegrepper 片段供參考，但它也無濟於事。

鏈接： https : //www.codegrepper.com/code-examples/javascript/react+function+component+state

大多數線程處理如何獲取父組件的值； 但是，我的問題更像是“設置狀態”。

import React, { useEffect, useState } from "react";
import Character from "../component/Character";
import Filter from "../component/Filter";
import Pagination from "../component/Pagination";
import axios from "axios";
import "./Home.css";

const Home = (props) => {

    const [API, setAPI] = useState(`https://someapi.com/api/character/?gender=&status=&name=`);
    const [characterData, setCharacterData] = useState([]);
    const [pagination, setPagination] = useState(0);

    const makeNetworkRequest = (data) => {
        setAPI(data);
        setTimeout(() => {
            axios.get(data).then(resp => {
                setPagination(resp.data.info)
                setCharacterData(resp.data.results)
            })
        }, 1000)
    }

    const handleFormCallBack = (childData) => {
        setAPI(childData);
        makeNetworkRequest(API);
        console.log(`Parent handler data ${childData}`)
        console.log(`Parent handler API ${API}`)
    }
     
    useEffect(() => {
        makeNetworkRequest(API)
    }, [characterData.length]);


    const mappedCharacters = characterData.length > 0 ? characterData.map((character) => <Character key={character.id} id={character.id} alive={character.status} /* status={<DeadOrAlive deadoralive={character.status} /> }*/ gender={character.gender} name={character.name} image={character.image} />) : <h4>Loading...</h4>

    return (
        <div className="home-container">
            <h3>Home</h3>
            <Filter parentCallBack={handleFormCallBack} />
            <div className="characters-container">
                {mappedCharacters}
            </div>
            {/* <Pagination pages={pagination.pages}/> */}
        </div>
    )
}

export default Home;

在上面的代碼中，我在名為“handleFormCallBack”的父級上使用回調函數，下面再次提到從子過濾器組件獲取信息。 當我記錄該值時，將生成以下結果。

const handleFormCallBack = (childData) => {
        setAPI(childData);
        makeNetworkRequest(API);

        console.log(`Parent handler data ${childData}`) 
        // Parent handler data https://someapi.com/api/character/?gender=&status=&name=charactername

        console.log(`Parent handler API ${API}`) 
        // Parent handler API https://someapi.com/api/character/?gender=&status=&name=

    }

我不確定我做錯了什么，但任何形式的幫助都將不勝感激。

親切的問候

Answer 1

useState 的工作方式與setState非常相似，並且它不是同步的，因此當您使用setAPI(childData);設置新值時； react 仍在更改狀態，並且在它實際更改之前，您的兩個 console.log() 語句都將被執行。

解決方案 - 設置新值后，您需要跟蹤它是否已更改，因此對端點 url 使用useEffect掛鈎，然后在更改時執行您想要的操作。

useEffect(() =< {
  // do anything you want to here when the API value changes. you can also add if conditions inside here.
}, [API])

在調用setAPI(childData);之后，只是為了檢查我所解釋的內容； 添加一個 setTimeout 像

setTimeout(() => { // 你會在這里得到新值。這只是為了說明我的觀點

console.log( Parent handler data ${childData} )

console.log( Parent handler API ${API} )

}, 5000);