В какой момент получать изменения store в компоненте React (Redux)?

Question

[Айдар Хаятов]

Добрый день!

Экспортирую компонент через функцию connect.

Изначально компонент рендерится с пустым store - далее как store обновляется - все отображается. При обновлении данных функция render запускается - все верно.

Но мне для дальнейшей работы часть данных из props (полученные через connect) надо вставить в state компонента (например чтобы привязать к текстовым полям). В каком месте это лучше сделать? Пытался в componentDidUpdate, но как будто не то. В самом рендере не хотелось бы

Answer 1

[davidnum95]

https://ru.reactjs.org/docs/react-component.html#s...

Comments

[Айдар Хаятов]

Спасибо, пробую:
У меня в компоненте текстовое поле

<input type="text" className="project__config__element__text"  value={this.state.name}  onChange={this.nameChangeHandler.bind(this)}  />

Эта статическая фукнция + обработчик текстового поля:

static getDerivedStateFromProps(props, state){
        if(props.project){
            return {...state, name: props.project.name};
        }
        return state;
    }

nameChangeHandler(e){
        const newName = e.target.value;
        console.log(newName);
        this.setState({
            name: newName
        })
    }

Соответственно это событие срабатывает и после изменения текстоового поля, перекрывая его действие своим.

Я понимаю что это супер тривиальная задача. При обновлении пропсов через коннект записать их в стейт для дальнейшей работы с ним. Возможно я выбрал не тот подход

[davidnum95]

Айдар Хаятов, вот здесь как раз твой случай
https://reactjs.org/blog/2018/06/07/you-probably-d...

Answer 2

[Айдар Хаятов]

Вопрос решился, через доп проверку на изначальное состояние стейта

state = {
        name: null    
    }


    componentDidUpdate(){
        if(this.state.name === null){
            this.setState({
                name: this.props.project.name
            })
        }
    }