无法使用功能组件从子级更新父状态

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);