Question

我是React的新手，需要显示每条新消息，但在render函数中，需要render_mess中的set索引中的数组显示消息。是否可以显示无循环的所有元素？

StaticResource

如何一次性获取渲染中的所有元素，或者需要修复哪些内容？

Answer 1

通常，您可以在反应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++)，因此您永远不会填充{{1} }。也不要在循环的每次迭代中都设置状态，而是将新组件存储在数组中，并在完成循环时设置新状态。

here是您可以玩的小提琴。

Answer 2

正如评论中所解释的那样，您的代码不是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>

如您所见，您不需要另一个state属性来保存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>

在这里，我们使用单独的函数来通过状态创建新的消息映射。通过调用它，我们可以在render方法中使用此功能。

如果您确实使用状态来保存新消息，请按以下步骤操作：

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生命周期来调用我们的函数。然后，在渲染方法中使用新状态。

我们不会在render方法中调用函数，因为它会设置状态。这会在我们的应用程序中造成循环。由于我们在render方法中设置了状态，因此组件重新渲染然后再次设置状态然后再次渲染...

渲染不起作用

2 个答案: