Как я могу обновить sh список в одном компоненте после отправки формы в другом компоненте, который имеет одного и того же родителя?

Question

У меня есть такая структура:

<users admin component>
   <user list component>
   <new user form component>
</users admin component>

Я не использую какой-либо тип глобального управления состоянием (ie redux) и хотел бы по возможности избежать этого. Я использую хуки для управления состоянием каждого компонента.

Что я хотел бы сделать, это обновить компонент списка пользователей (GET) при выполнении POST вызов успешно выполняется в компоненте формы.

Каков наилучший способ выполнить sh это? Является ли более распространенным добавление нового элемента в существующий список пользователей или просто изменение sh списка другим GET? Как мне сделать sh правильное решение?

Теоретически, в какой момент пришло время ввести какой-то тип глобального управления состоянием, такой как Redux?

Answer 1

Лично мне нравится избегать использования глобального состояния там, где оно не нужно. Как правило, вы должны учитывать, в каких местах вам нужно использовать данные и как далеко они находятся друг от друга. Например, в вашем случае это не нужно, потому что ваши компоненты находятся очень близко друг к другу, и данные больше нигде не используются.

Чтобы легко передавать данные, вы должны поднять состояние вверх . Это означает, что ваш родитель UsersAdminComponent должен хранить состояние и передавать значения и обратные вызовы только потомкам.

Вот пример того, как я бы это сделал:

UsersAdminComponent. js

const UsersAdminComponent = () => {
    const [setList, list] = useState([])

    return (
        <>
            <UserListComponent list={list} />
            <NewUserFormComponent setList={setList} />
        </>
    )
}

UserListComponent. js

const UserListComponent = ({ list }) => {
    return (
        {/* displaying the list here */}
    )
}

NewUserFormComponent. js

const NewUserFormComponent = ({ setList }) => {
    const onSubmit = (event) => {
        event.preventDefault()
        fetch(...)
            .then(data => data.json())
            .then(data => {
                setList(previousList => [
                    ...previousList,
                    ...data.newElements,
                ])
            })
    }

    return (
        <form onSubmit={onSubmit}>
            {/* form contents */}
        </form>
    )
}