0

您好，我正在尝试从主（父）函数内的模态（子函数）保存数据。模态加载某些 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 中，而不是在我在 add1 函数中设置它之后立即使用setSavedData1localStorageconsole.log函数data1，它似乎出现在数组中，但紧随其后的是useEffect日志，它始终为空。我真的会帮助任何人，因为我非常坚持这一点并且不知道该怎么做。

4

1 回答 1

2

我建议添加一个依赖数组作为你的 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

于 2020-03-26T10:47:25.553 回答