React Next js: стили ломаются при изменении состояния - PullRequest
Новая
       40

React Next js: стили ломаются при изменении состояния

0 голосов
/ 12 февраля 2020

Чтобы максимально упростить мою задачу, я хочу показать x количество селекторов в зависимости от размера состояния (в этом случае размер технологий, которые являются выбранными вариантами другого), дело в том, что некоторые классы стилей ломаются при изменении состояния технологий. 

this.state = {
  formData: {
    technologies: [],
  }

Итак, это 2 блока кода с одинаковым намерением:

ПЕРВЫЙ ПРИМЕР: (Это работает, но это не так что я ищу) 

  renderTechnologyExperienceOptions() {
return (
  <div className="col-sm-6">
    <select
      name="experiences"
      className="form-control selectpicker is-marginless"
      data-style="btn"
      title="Years of Expe rience"
      onChange={() => console.log('New tech selected')}
    >
      {MockedExperience.applicantExperience.map((item: any, index: any) => (
        <option id={index} value={item.value} key={index}>
          {item.text}
        </option>
      ))}
    </select>
    <select
      name="experiences"
      className="form-control selectpicker is-marginless"
      data-style="btn"
      title="Years of Experience"
      onChange={() => console.log('New tech selected')}
    >
      {MockedExperience.applicantExperience.map((item: any, index: any) => (
        <option id={index} value={item.value} key={index}>
          {item.text}
        </option>
      ))}
    </select>
    <select
      name="experiences"
      className="form-control selectpicker is-marginless"
      data-style="btn"
      title="Years of Experience"
      onChange={() => console.log('New tech selected')}
    >
      {MockedExperience.applicantExperience.map((item: any, index: any) => (
        <option id={index} value={item.value} key={index}>
          {item.text}
        </option>
      ))}
    </select>
  </div>
);

}

ВТОРОЙ ПРИМЕР: (это то, что я хочу, но это нарушает стили при обновлении состояния) 

  renderTechnologyExperienceOptions(technologiesLength: number) {
console.log(this.state.formData.technologies);
let visibles = 0;
if (technologiesLength == 2) {
  visibles = 2;
} else if (technologiesLength == 3) {
  visibles = 3;
}

let rows = [];
let options = [];
for (let index = 0; index < 5; index++) {
  options.push(
    <option value={MockedExperience.applicantExperience[index].value} key={index}>
      {MockedExperience.applicantExperience[index].text}
    </option>,
  );
}
for (let index = 0; index < visibles; index++) {
  rows.push(
    <select
      key={index}
      name="experiences"
      className="form-control selectpicker is-marginless"
      data-style="btn btn-link"
      title="Years of Experience"
      onChange={() => console.log('New tech selected')}
    >
      {options}
    </select>,
  );
}
return <div className="col-sm-6">{rows}</div>;

}

Теперь, допустим, я начинаю свое исходное состояние следующим образом (числа - это идентификаторы некоторых смоделированных технологий): 

this.state = {
  formData: {
    technologies: [5, 9, 6],
  }

Если это так, стили будут работать, но если вы измените это состояние (выбрав / отменив выбор технологии), стили будут нарушены.

Итак, мои вопросы: почему это происходит? Как я могу сделать это каждый раз, когда состояние технологий меняется, не нарушая стили? (кстати, ВТОРОЙ ПРИМЕР использует for, но я также пытался с картой, и результат тот же)

...