React Hook setState 函數不更新值

Question

我正在嘗試組合一個 MERN 堆棧應用程序，目前我正在客戶端工作。 React 鈎子對我來說有點新，我目前正在嘗試使用 react-hook-popup 庫類中的usePopup來使用它們，但值不會更新，我不知道為什么？

下面的兩行相關代碼我特別難以更新：

const [newChore, setNewChore] = useState("")
const [newChoreIndex, setNewChoreIndex] = useState(-1)

EDIT1：所以我注意到如果我在彈出鈎子之外設置狀態，狀態將更新，這是我為“newChoreIndex”鈎​​子所做的。 有什么我需要能夠在彈出窗口中使用這些鈎子變量的嗎？

EDIT2：我有客戶端和服務器端的回購，如果這讓事情變得更容易，我可以分享。 克隆后，只需運行 npm i，然后為兩個應用程序運行 npm start。

服務器端： https : //github.com/halsheik/HouseholdHomiesBackend.git客戶端： https : //github.com/halsheik/HouseholdHomiesFrontend.git

import React, { useState, useEffect } from "react";
import { usePopup } from 'react-hook-popup';
import Axios from "axios";
import "../../stylesheets/modal.css";
import "../../stylesheets/homepage.css";

function HomePage() {
    const [user, setUser] = useState(null);
    const [group, setGroup] = useState(null);
    const [newChore, setNewChore] = useState("")
    const [newChoreIndex, setNewChoreIndex] = useState(-1)
    const [showPopup, hidePopup] = usePopup('popup', ({ message, handleClose }) => (
        <div className="modal">
            <div className="modalInner">
                <button 
                    className="modalClose"
                    onClick={handleClose}>
                    X
                </button>

                <div className="modalInner2">
                    <p className="modalHeading">Previous Chore(s)</p>
                    <p className="modalChore">{message}</p>

                    <p className="modalHeading">New Chore {newChoreIndex}</p>
                    <input
                        className="newChoreInput"
                        placeholder="New Chore"
                        onChange={(e) => setNewChore(e.target.value)}
                    />

                    <button 
                        className="modalSubmit"
                        onClick={() => {
                            console.log(newChore)
                            updateChore()
                            hidePopup()
                        }}>
                        Update Chore
                    </button>
                </div>
            </div>
        </div>
    ));

    useEffect(() => {
        Axios({
            method: "GET",
            withCredentials: true,
            url: "http://localhost:4000/",
        }).then((res) => {
            setUser(res.data);
            
            if(!res.data) {
                window.location.href = "/login"; 
            }
        });

        Axios({
            method: "GET",
            withCredentials: true,
            url: "http://localhost:4000/group",
        }).then((res) => {
            setGroup(res.data);
            console.log(res);
        });
    }, [])

    const updateChore = () => {
        console.log(newChoreIndex)
    };

    return (
        <div className="mainContainer">
            {user ? (

            <div className="contentContainer">
                <p className="homepageHeading">Welcome resident's of {user.address}</p>
                
                {!group ? (
                <div className="groupNotSetupContainer">
                    <p className="groupNotSetup">Household has not been setup</p>
                    <a href="/createGroup" className="groupNotSetupButtonContainer"><button className="groupNotSetupButton">Setup Household</button></a>
                </div>

                ) : (

                <div className="groupContent">
                    <div className="groupContentCol">
                        <p className="groupContentColHeading">Household Members</p>

                        {group.members.map((item, index) => {
                                return (
                                    <div key={index} className="groupContentColMember">
                                        <p className="groupContentColItemText">{item["name"]}</p>
                                    </div>
                                )
                            }
                        )}
                    </div>

                    <div className="groupContentCol">
                        <p className="groupContentColHeading">Chores</p>

                        {group.chores.map((item, index) => {
                                var member = group.head + parseInt(index)

                                if(member >= group.members.length) {
                                    member = 0
                                }

                                return (
                                    <div key={index} className="groupContentColChore">
                                        {item === "organizer" ? (
                                        <div className="groupContentColChoreInner">
                                            <p className="groupContentColItemText">{item}</p>
                                            <p className="groupContentColItemText assignedChore">{group.members[member]["name"]}</p>
                                        </div>
                                        ) : (
                                        <div className="groupContentColChoreInner">
                                            <p className="groupContentColItemText killCurves">{item}</p>
                                            <p className="groupContentColItemText assignedChore">{group.members[member]["name"]}</p>
                                        </div>)}
                                        
                                        {item !== "organizer" && <p 
                                            href="#"
                                            className="groupContentColChoreEdit"
                                            onClick={() => {
                                                setNewChoreIndex(() => newChoreIndex + 1)
                                                showPopup(item)
                                                console.log(newChoreIndex)
                                            }}>Edit</p>
                                        }
                                        
                                    </div>
                                )
                            }
                        )}
                    </div>
                </div>
                

                )}
                </div>
            
            ) : (
            // should not enter here
            <div>
                <h1>Welcome to household homies, please login</h1>
                <p><a href="/login">login</a></p>
                <p><a href="/register">register</a></p>
            </div>

            )}
        </div>
    );
}

export default HomePage;

Answer 1

我無法評論，因為我剛剛注冊了一個帳戶

話雖如此，如果您能提供更多信息，我可以更新此答案:)

你在哪里檢查設置新家務的結果？ 我可以在您發布的代碼中看到，在updateChore函數中記錄了新的雜項索引，而不是newChore本身。 您是否嘗試過登錄另一個useEffect ？ 喜歡...

useEffect(() => {
  console.log(newChore);
}, [newChore]);