Реагируйте setState () после выборки без перерисовки - PullRequest
0 голосов
/ 21 февраля 2019

Я извлекаю данные в componentDidMount () (я получаю их в нужной форме) и хочу сохранить их в состояние компонента с this.setState .Состояние не меняется.

  • Я консольный журнал, который я получаю до точки, где вызывается setState - есть условия
  • Я пытался const that = this

Компонент не выполняет повторную визуализацию и его состояние не меняется, и я хотел бы знать, почему.

Мой код:

export class Offers extends Component {
    constructor(props) {
        super(props);
        this.renderOffer = this.renderOffer.bind(this);
        this.state = {
        ...
        };
    }
    componentWillMount() {
        this.setState(() => ({
            offer: {},
            isLoading: true,
            isMyOffer: false,

            ...
        }));
    }

    componentDidMount() {
        console.log('MOUNTED');
        const { profile } = this.props;
        if (profile) {
            this.setState(() => ({
                isLoading: false
            }));
        }
        if (profile && profile._id) {
            this.setState(() => ({
                isMyOffer: true,
                ...
            }));

            fetch(`/api/offers-by/${profile._id}`,{
                method: 'GET'
            })
           .then(response => response.json())
           .then(offers => {
               if(!offers || !offers.length) {
                   this.setState(() => ({
                   isLoading: false
                  })
                  );
              } else {
                  console.log('ELSE', offers[0]._id); // getting proper data
                  console.log('THIS', this) // getting this object 
                  const offerData = offers[0]
                  this.setState(() => ({
                      offer: offerData,
                      isLoading: false
                  })) //  then
              }}) // fetch
              console.log('STATE', this.state)
          }
          console.log('STATE', this.state)
    }

1 Ответ

0 голосов
/ 21 февраля 2019

setState имеет метод обратного вызова в качестве второго аргумента. Вы должны использовать его после начального setState. Это работает, потому что сам setState является асинхронной операцией. Метод setState () не обновляет состояние компонента немедленно, а скорее, еслиэто несколько setStates, они будут объединены в один вызов setState.

this.setState(() => ({
            isLoading: false
        }),() =>{
   /// You can call setState again here and again use callback and  call fetch and invoke setState again..
});

В идеале вы могли бы реорганизовать некоторые из ваших setStates в один вызов setState.Start с пустым объектом и добавить свойства к вашему объекту на основеусловия.

const updatedState ={}
if(loading){
 updatedState.loading = false
}
if(profile &&..){
 updatedState.someProperty = value.
}

this.setState(updatedObject,()=> {//code for fetch..
}) // Using the object form since you don't seem to be in need of previous State.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...