Рендеринг не работал в React

вы обычно можете визуализировать массив компонентов в React 16, что-то вроде этого

return [
  <li key = "1">One</li>,
  <li key = "2">Two</li>,
  <li key = "3">Three</li>
];

но у вас есть более серьезные проблемы, помимо того, что new_message никогда не вызывается в этой функции, ваш цикл for не выполняется, потому что, когда вы его оцениваете, он выглядит как этот for (var i = 0; i < 0; i++), поэтому вы никогда не заполняете mes_for_show. также не устанавливайте состояние на каждой итерации цикла, сохраняйте новые компоненты в массиве, а когда цикл завершен, установите новое состояние.

здесь - рабочий пример, с которой можно играть.

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { new_mes: [ "foo", "bar" ] };
  }

    render() {
      return (
        <div>{
          this.state.new_mes.map( (mes,i) => (
            <div key = {i}>{mes}</div>
          ))
        }</div>
      )
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "root"></div>

Как видите, вам не нужно другое свойство состояния для хранения JXS для рендеринга. Вы можете легко сделать это в своем методе рендеринга. Кроме того, здесь мы используем .map вместо петель for. Потому что .map возвращает массив, и мы можем легко использовать этот массив для рендеринга наших элементов.

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

Обновление после комментариев

Вот пример того, как вы меняете значения с помощью функции.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { new_mes: ["foo", "bar"] };
  }

  new_mes = () => this.state.new_mes.map( (mes,i) => (
    <div key = {i}>{`Hello ${mes}.`}</div>
  ))

  render() {
    return (
      <div>{
        this.new_mes()
      }</div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "root"></div>

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

Если вы действительно используете свое состояние для хранения новых сообщений, вот как вы можете это сделать:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { new_mes: ["foo", "bar"], mes_for_show: [] };
  }

  componentDidMount() {
    this.new_mes();
  }

  new_mes = () => {
    const mes_for_show = this.state.new_mes.map((mes, i) =>
      <div key = {i}>{`Hello ${mes}.`}</div>);
    this.setState({ mes_for_show });
  };

  render() {
    return <div>{this.state.mes_for_show}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "root"></div>

В этом примере мы снова используем внешнюю функцию. Но вместо того, чтобы возвращать массив, включающий наши элементы, мы назначаем этот массив переменной (то же самое с нашим именем состояния), а затем, используя this.setState, мы обновляем наше состояние. Большая разница в том, что здесь мы используем жизненный цикл componentDidMount для вызова нашей функции. Затем мы используем наше новое состояние в нашем методе рендеринга.

Мы не вызываем нашу функцию в нашем методе рендеринга, поскольку она устанавливает наше состояние. Это вызывает зацикливание в нашем приложении. Поскольку мы устанавливаем наше состояние в методе рендеринга, то компонент повторно отображает состояние, затем снова выполняет рендеринг ...