Проблема с такими свойствами this.props, хотя они и есть

Question

Правильно, это адское имя. Но я просто не могу в своем государстве придумать лучший титул.

Проблема заключается в следующем.

В Реагировании, во время componentWillMount Я инициирую состояние до null, которое затем обновляется после того, как данные извлекаются с сервера через ajax.

структура выглядит следующим образом:

componentWillMount() { 
    this.state = { calculator: {} }; 

    initCalculator() 
    .then(calculator => { 
     this.setState({ calculator }); 
    }) 
    .catch(err => { 
     console.log(err); 
    }); 
    } 

Сами данные вытягивается здесь:

function initCalculator() { 
    const promise = new Promise((resolve, reject) => { 
     const instance = parseInstance(); 
     const compId = Wix.Utils.getOrigCompId(); 

     axios.get(`/api/calculator?instance=${instance}&compId=${compId}`) 
     .then(res => { 
      resolve(res.data); 
     }) 
     .catch(err => { 
      reject(err); 
     }); 
    }); 

    return promise; 
    } 

res.data является объектом ответа с данными сервера.

Эти данные затем передаются в состояние, как вы видели выше.

Это состояние данных затем переходит в руки другого элемента, так:

<Settings tab="Settings" calculator={ this.state.calculator } onUpdate={ this.settingsUpdate.bind(this) }/> 

данные, однако, не «разрешен» на другом конце вкладке Настройки.

всякий раз, когда я пытаюсь получить доступ к свойствам в глубине объекта калькулятора, он всегда вызывает у меня ошибку.

cannot read property settings of null

Это можно увидеть здесь

const name = this.props.calculator.settings ? this.props.calculator.settings.name : ''; 

Так что, если я попытался получить доступ calculator.settings.name, было бы бросить подобную ошибку на меня.

Кроме того, const name всегда устанавливается в '' даже во время второго повторного рендеринга, когда, по-видимому, данные уже должны быть доступны, поскольку состояние было обновлено, что вызвало повторную визуализацию в дочернем элементе.

Я понимаю, почему это происходит. Как минимум. Объект передается до его разрешения, поэтому во время второго изменения состояния, которое является this.setState({ calculator });, повторная рендер вызывается до того, как состояние будет полностью обновлено. По крайней мере, я так считаю.

Если я console.log(this.props.calculator), я могу видеть все эти данные просто отлично. Но поскольку console.log, щелкнув стрелку, чтобы развернуть детали, разрешает данные в среднем времени.

Если у меня JSON.stringify(this.props.calculator), все данные будут показаны и доступны. Теперь я знаю, что я, вероятно, обойдусь этим, используя JSON.stringify и JSON.parse. Но это просто тупой способ решить такие проблемы, которые я, вероятно, создал сам.

Я понимаю, что объекты работают через ссылки. Поэтому я считаю, что проблема лежит где-то в первоначальном запросе get ajax или методе setState.

Возможно, кто-то с острым глазом сможет увидеть, в чем проблема. Но сейчас я просто ударяю головой о стену.

Answer 1

Установите свое состояние в constructor, а не на ваш componentWillMount. Сделайте свой ajax-вызов на компонентеDidMount и обновите состояние по успешному запросу.