React hooks：在子函数内部的 onClick 函数内部更改父函数的状态

Question

您好，我正在尝试从主（父）函数中的模态（子函数）保存数据。模式会根据单击的按钮加载某些 html（都做同样的事情）。

export default function () {
    const [addModal, setAddModal] = useState("display-none")
    const closeModal = () => setAddModal("display-none")
    const openAddModal = () => setAddModal("display-block")
    const [addModalType, setAddModalType] = useState("")

    const [savedData1, setSavedData1] = useState(JSON.parse(localStorage.getItem("data1")) || [])
    const [savedData2, setSavedData2] = useState(JSON.parse(localStorage.getItem("data2")) || [])
    const [savedData3, setSavedData3] = useState(JSON.parse(localStorage.getItem("data3")) || [])

    useEffect(() => {
        localStorage.setItem("data1", JSON.stringify(savedData1))
        localStorage.setItem("data2", JSON.stringify(savedData2))
        localStorage.setItem("data3", JSON.stringify(savedData3))
        console.log(savedData1)
    })

    function addPoolFunction(e) {
        if (e.target.id === "btn1") {
            setAddModalType(<AddData1 />)
        } else if (e.target.id === "btn2") {
            setAddModalType(< AddData2 />)
        } else if (e.target.id === "btn3") {
            setAddModalType(< AddData3 />)
        }
    openAddPool()
    }
    return (
        <Modal show={addModal} handleClose={closeModal}>
            {addModalType}
        </Modal>
        <div>{savedData1.id}</div>
        <div>{savedData2.id}</div>
        <div>{savedData3.id}</div>

    )

    function AddData1() {
        const [idInput, setIdInput] = useState("")

        function add1() {
            let newObj = {id:idInput}
            //here is the issue. adding this obj to the savedData array so it will load in the parent function html
            setSavedData1(oldArray => [...oldArray, newObj]) // this does not work
        }

        return (
            <input value={idInput} onChange={e => setIdInput(e.target.value)}></input>
            <button onClick={add1}>Add</button>
        )
    }

    // (same functions for AddData2 and AddData3 with some variations as to how data is collected)
}

主要问题是设置保存的数据。当我按下添加按钮时，useEffect 然后记录并且数组为空。我什至尝试将数据保存在 localStorage 中，而不是使用 setSavedData1 函数 I console.log localStorage data1 在我将其设置在 add1 函数中之后它似乎出现在数组中，但 useEffect 紧随其后它总是空的。我真的会帮助任何人，因为我非常坚持这一点并且不知道该怎么做。

Answer 1

我建议添加一个依赖数组作为你的 useEffect 的第二个参数。 问题是，如果你不指定这样的数组，useEffect 将运行每个渲染，导致从你的 localStorage 重新设置数据。 试试这样的：

useEffect(() => {
    localStorage.setItem("data1", JSON.stringify(savedData1))
    localStorage.setItem("data2", JSON.stringify(savedData2))
    localStorage.setItem("data3", JSON.stringify(savedData3))
    console.log(savedData1)
}, []);

还可以阅读以下内容了解更多信息： https://reactjs.org/docs/hooks-effect.html