Как правильно перезагрузить элемент React?

Question

[Ninja Mate]

Есть элемент, в котором таблица (получаем ajax при создании), модал для создания новых записей(отдельный элемент).
Как правильно вызывать render для родителя. Нужно опять получить данные таблицы обнулить стейты модала и еще куча всего.

window.location.reload() ищу альтернативу для перегрузки только конкретного элемента

//Кнопка в родителе не работает, только вызывает существующие стейты. 
//А нужно "перезапустить" весь элемент.
<Button  onClick={ ()=>this.forceUpdate() }
                             bsStyle="warning" >forceUpdate</Button>

Comments

[copal]

а Вы уверенны что данные у Вас успевают загрузится?

[Ninja Mate]

copal: уже не в данных дело, пытаюсь зазать стейт и потом его сбросить, но не работает

this.state = {
            count:1
...
<Button  onClick={() => this.forceUpdate()
                    } >forceUpdate</Button>

   {Math.random()}//обновляется по forceUpdate
   {this.state.count}//К изначальному значению не сбрасывается

<Button  onClick={()=>this.setState({count: this.state.count+1})
                    } >Plus</Button>

Answer 1

[Aves]

Насколько я понимаю, нужно полностью перемонтировать компонент. Можно обернуть в компонент верхнего уровня со свойством key и методом его изменения.

const resetable = Component => class extends React.Component {
  state = {key: 0};
  render() { 
    return <Component
      {...this.props}
      reset={() => this.setState({key: this.state.key + 1})}
      key={this.state.key}
    />;
  }
}

пример
Или без state с forceUpdate

const resetable = Component => class extends React.Component {
  render() {
    return <Component
      {...this.props}
      reset={() => this.forceUpdate()}
      key={Math.random()}
    />;
  }
}

Ну или просто в родительском компоненте сделать то же самое.

Comments

[Ninja Mate]

Невероятно большое спасибо! что бы я без вас делал)
Сам додумался до двух других вариантов:
1 Сделал обертку и там задавал главный стейт, передавал метод для его замены на пустой и вызывал forceUpdate.
2 Создал метод в котором все необходимые запросы и стейты которые нужно обновить.
Ваш вариант мне нравится больше)

class Users extends Component {

    constructor(...props) {
        super(...props);
        this.state = {
            key: 0
        };
    }

    render() {
        return (
            <div>
                <CoreUsers
                    {...this.props}
                    reset={() => this.setState({key: this.state.key + 1})}
                    key={this.state.key}
                />
            </div>
        );
    }
}

module.exports = Users;

Answer 2

[Андрей Белокопытов]

Правильная перезагрузка подразумевает обновление модели в storage и автоматический рендеринг дерева компонентов.

Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render().

Comments

[Ninja Mate]

Это я читал. Не использую в данном случае Redux/Flux. А сам forceUpdate() не запускается, пытаюсь выяснить почему и есть ли еще другие способы создать у юзера видимость что форма отправки сработала и запись появилась.

[Андрей Белокопытов]

Ninja Mate: можно добавить родительскому элементу метод, который будет обновлять state и вызывать этот метод в дочернем элементе.

[Ninja Mate]

Андрей Белокопытов: this.setState(state)? у меня данные таблицы еще нужно получить с ajax и еще пара мелких моментов... если все заворачивать в метод, то для каждого случая придется думать отдельный. Так ли плох forceUpdate() и как его правильно запустить)
?

[Андрей Белокопытов]

Ninja Mate: так один метод в идеале и должен выполнять строго одну функцию. Не могу сказать, в чем у вас проблема с forceUpdate, вот пример, все отлично работает jsbin.com/hasayizina/edit?js,output

[Ninja Mate]

Андрей Белокопытов: да действительно... я в подключаемом модуле пытаюсь использовать. вроде никакой разницы быть не должно

[Ninja Mate]

Андрей Белокопытов: в вашем примере обновляется страница, но все стейты не сбрасываются. мне же требуется перезагрузка элемента...

[Андрей Белокопытов]

Ninja Mate: ну так измените state. forceUpdate просто вызывает render для элемента, больше эта функция ничего не делает

[Ninja Mate]

Андрей Белокопытов: возможно я не понимаю о чем вы. если вызывать рендер всего приложения, то это не то. элемент сам находится в родителе и нужно перегрузить ветку начиная от конкретного элемента с изначальными стейтами componentWillMount и прочим.