Лучший подход для использования одного и того же компонента для редактирования и добавления данных.Смешивание состояния компонента с избыточным хранилищем

Question

Я создаю веб-приложение в React с Redux.Это простой диспетчер устройств.Я использую тот же компонент для добавления и обновления устройства в базе данных.Я не уверен, что мой подход правильный.Здесь вы можете найти части моего решения:

РЕЖИМ ОБНОВЛЕНИЯ:

В componentDidMount я проверяю, был ли передан идентификатор устройства в URL (режим редактирования).Если это так, я вызываю избыточное действие, чтобы получить данные из базы данных.Я использую функцию подключения, поэтому, когда приходит ответ, он будет сопоставлен с реквизитами компонента.

Вот мой mapStateToProps (вероятно, мне следует отображать только определенное свойство, но в данном случае это не имеет значения)

const mapStateToProps = state => ({
    ...state
})

и componentDidMount:

componentDidMount() {
    const deviceId = this.props.match.params.deviceId;
        if (deviceId) {
            this.props.getDevice(deviceId);
            this.setState({ editMode: true });
        }
    }

Затем будет запущен componentWillReceiveProps, и я смогу вызвать setState для заполнения входов в моей форме.

componentWillReceiveProps(nextProps) {
    if (nextProps.devices.item) {
        this.setState({
            id: nextProps.devices.item.id,
            name: nextProps.devices.item.name,
            description: nextProps.devices.item.description
        });
    }
}

ADD MODE:

Режим добавления еще проще - я просто вызываю setState при каждом изменении входа.

handleChange = name => event => {
    this.setState({
        [name]: event.target.value,
    });
};

Вот так выглядят мои входные данные:

<TextField
    onChange={this.handleChange('description')}
    label="Description"
    className={classes.textField}
    value={this.state.description}
/>

Мне не нравится этот подход, потому что мне приходится вызывать setState () после получения данных из бэкэнда.Я также использую componentWillReceiveProps, что является плохой практикой.

Есть ли лучшие подходы?Я могу использовать, например, только хранилище резервов вместо состояния компонента (но мне не нужны входные данные в хранилище резервов).Может быть, я могу использовать поле React ref и избавиться от состояния компонента?

Дополнительный вопрос - действительно ли я должен вызывать setState для каждого входа onChange?

Answer 1

Чтобы избежать использования componentWillReceiveProps, а также потому, что вы используете избыточность, вы можете сделать:вместо this.state.Это работает, потому что mapStateToProps будет оцениваться каждый раз, когда вы обновляете избыточное хранилище.Кроме того, вы сможете получить доступ с description по this.state и оставить свой TextField как есть.Вы можете прочитать больше о getDerivedStateFromProps здесь .

Что касается вашего второго вопроса, звоните setState каждый раз, когда входные данные полностью меняются;это то, что называется контролируемым компонентом, и команда реагирования (ни я) поощряет его использование.Смотрите здесь .