Как я могу избежать обхода React?

Question

Я вижу повторяющуюся "ошибку", которой на самом деле нет, если это ошибка или просто какое-то регулярное поведение React.

Я получаю некоторые данные из API, а затем устанавливаю эти значения для некоторых входных данных.

Итак, посмотрите этот пример:

              <select
                value={
                  (startupFourthStepForm &&
                    startupFourthStepForm.my_team &&
                    startupFourthStepForm.my_team[index] &&
                    startupFourthStepForm.my_team[index].country_code_mobile)}
                required
                id="select-country"
                onChange={e =>
                  handleAddingNewObjectToFormArray(
                    e.currentTarget.value,
                    'country_code_mobile',
                    index,
                  )
                }
              >
                <option value="" className="empty-option">
                  Select Country Code
                </option>
                {COUNTRY_CODE_LIST.map(item => (
                  <option value={item.code} id={item.name} key={item.name}>
                    {item.name} {item.code}
                  </option>
                ))}
              </select>

Вопрос касаетсяэтот кусок кода:

value={
  (startupFourthStepForm &&
    startupFourthStepForm.my_team &&
    startupFourthStepForm.my_team[index] &&
    startupFourthStepForm.my_team[index].country_code_mobile)}

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

Например, если я делаю это value={startupFourthStepForm.my_team[index].country_code_mobile} Я получаю ошибку вроде can not read property 0 of undefined или что-то в этом роде.

Я использую lodash, кстати.

Итак, что я делаю, чтобы избежать этого?

Answer 1

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

Для этого, поскольку вы уже используете lodash, вы также можете использоватьloadsh#get.

Может идти как:

const countryCodeMobile = _.get(startupFourthStepForm, `my_team[${index}].country_code_mobile`);

//...

value={countryCodeMobile}

Answer 2

Существует предложение по необязательному сцеплению в javascript, которое доступно через babel:

https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

В основном вы пишете свой код так:

startupFourthStepForm?.my_team?.[index]?.country_code_mobile