Компонент не перерисовывается при отправке формы.Рендеринг только при полном обновлении страницы - PullRequest
Новая
       32

Компонент не перерисовывается при отправке формы.Рендеринг только при полном обновлении страницы

0 голосов
/ 15 мая 2019

Подводя итог, я отправляю запрос POST VIA axios, и мне очень трудно понять, почему он не будет повторно отображать мой компонент, отображающий вновь добавленные данные (где все это происходит).

Вот мой почтовый запрос (данные сохраняются правильно): 

addNewLoad = (pickup_date, pickup_location, rate, delivery_date, delivery_location, loaded_miles, deadhead_miles, local, delivery_id) => {
        let config = {
            headers: {
                'Content-Type': 'application/json; charset=utf-8', "Accepts": "application/json",
            }
        }
     const instance = axios.create({baseURL: 'http://localhost:3001'})
      instance.post('/api/v1/pickup_deliveries', { pickup_date, pickup_location, rate, delivery_date, delivery_location, loaded_miles, deadhead_miles, local, delivery_id}, config)
        .then(response => {
        console.log(response)
          const pickup_deliveries = [ ...this.state.pickup_deliveries, response.data ]
          this.setState({pickup_deliveries})
        })
        .catch(error => {
            console.log(error)
        })
    }

Вот состояние моего компонента: 

    state = {
        fiveDayView: [new Date(),
        addDays(new Date(), 1),
        addDays(new Date(), 2),
        addDays(new Date(), 3),
        addDays(new Date(), 4)],
        routeId: '',
        show: false,
        pickup_deliveries: [],
    }

Итак ... когда я this.setState({pickup_deliveries}),Я ожидаю, что мой компонент будет повторно визуализирован.Не только это, но и внутри этого компонента, я в настоящее время извлекаю все данные из моего Rails API и использую эти данные для отображения в этом компоненте.Я рассчитывал между this.setState({pickup_deliveries}) и повторным рендерингом родительского компонента, откуда эти данные поступают как this.props.apiData, не было бы никаких проблем с моим компонентом повторного рендеринга и отображения вновь представленных данных.

Извините, если это сбивает с толку, но я в недоумении.

Ответы [ 2 ]

1 голос
/ 15 мая 2019

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

setState не выполняет повторную визуализацию, если не было обнаружено изменение состояния

Вторая важная вещь, когда вы обновляете состояние и используете старое значение состояния, вы не должны обращаться к this.state, ваш код должен выглядеть примерно так: 

this.setState((prevState) => ({
  pickup_deliveries: [...prevState.pickup_deliveries, response.data]);

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

Подробнее по этой теме https://reactjs.org/docs/state-and-lifecycle.html Цитата:

Обновления состояния могут быть асинхронными

React может объединять несколько вызовов setState () в одно обновление для повышения производительности.

Потому что this.props и this.состояние может обновляться асинхронно, вы не должны полагаться на их значения для расчета следующего состояния.

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

0 голосов
/ 15 мая 2019

Изменение 

this.setState({ pickup_deliveries });

до 

this.setState(() => ({ pickup_deliveries }));

для обратного вызова на основе setState.

...