React hooks: изменение состояния в родительской функции внутри функции onClick внутри дочерней функции - PullRequest
Новая
       22

React hooks: изменение состояния в родительской функции внутри функции onClick внутри дочерней функции

0 голосов
/ 26 марта 2020

Здравствуйте. Я пытаюсь сохранить данные из модальной (дочерней функции) внутри главной (родительской) функции. Модал загружает определенный 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 регистрируется сразу после это и всегда пусто. Я действительно кому-нибудь помогу, потому что я очень застрял в этом и не знаю, что делать.

1 Ответ

2 голосов
/ 26 марта 2020

Я бы предложил добавить массив зависимостей в качестве второго аргумента для вашего 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

...