Присоединение JSX к переменной состояния в ReactJS

Question

У меня есть переменная состояния, в которой хранится код JSX, который будет отображаться в DOM в методе render(). Вот структура состояния и переменная состояния jsxComp, которая у меня в данный момент есть,

state = {
    isLoggedin: false,
    jsxComp: null
}

Что я пытаюсь сделать, это я пытаюсь добавить код JSX (div) в эту переменную внутри для l oop следующим образом:

for(let i=0; i<postCount; i++){
    this.setState({
        //Append a div to the jsxComp variable
     })
}

Как я могу это сделать? * Оператор + в этом случае не работает.

Answer 1

Никогда не сохраняйте фактические элементы в state. State должен содержать только чистые данные для отображения, а не фактическую разметку. Вместо этого сделайте ваш метод render() условным рендерингом в зависимости от состояния:

class MyComp extends React.Component {
  state = {
    isLoggedIn: false,
  };

  render() {
    const {isLoggedIn} = this.state;

    return (
      <div>
        {/* conditionally render based on isLoggedIn */}
        <p>{isLoggedIn ? 'You are logged in' : 'Please log in.'}</p>
        <button onClick={() => this.setState({isLoggedIn: true})}>
          Log In
        </button>
      </div>
    );
  }
}

Ваш метод render() будет вызываться при каждом изменении state. Затем React будет различать результат рендеринга и обновит DOM, где элементы изменились.

Вы также не должны вызывать setState() в al oop. Сначала соберите изменения, а затем вызовите setState со всем измененным массивом. Чтобы на самом деле добавить что-то к существующему массиву в state, вы должны сделать:

this.setState(state => {jsxComp : [...state.jsxComp, newElement]});