React js - 使用数组值和换行符更新状态

Question

我有一个数组，其中包含一些错误“var HoldErrors”。我正在更新 React JS 应用程序中的状态：

this.setState({
   message: HoldErrors
});

当在屏幕上输出时，该数组已成为我向最终用户显示的一串错误消息，这很棒。但是如何用换行符分隔状态中的每个错误消息呢？

例如，当我构建数组时，我尝试在每个项目后添加一个“br”标签：

var HoldErrors = [];
Object.keys(data.errors).forEach(function(key){
    HoldErrors.push(data.errors[key].msg + '<br>');
});

显然“br”标签在 React 中是行不通的。那么，当我更新状态时，如何将数组中的每个错误放在自己的行上？干杯。

编辑：这就是我渲染组件的方式：

render() {
        return (
            <div className="Register">
                <h1>Register</h1>
                <form onSubmit={this.RegisterSubmit}>
                    <input type="email" ref="email" placeholder="Email address" />
                    <input type="text" ref="name" placeholder="Your name" />
                    <input type="password" ref="password" placeholder="Password" />
                    <input type="password" ref="passwordc" placeholder="Confirm password" />
                    <input type="submit" value="Register" />
                </form>
                <div className="validation-msg">{this.state.message}</div>
            </div>
        )
    }

Answer 1

当你说

<div className="validation-msg">{this.state.message}</div>

该{this.state.message}部分将通过将其强制为字符串来呈现（DOM 中的所有文本最终都作为字符串）。

因为message是一个数组，所以将其强制转换为字符串与通过将其包含的所有元素单独强制转换为字符串（在本例中它们已经是字符串）并在其间添加逗号来连接它们相同：

<div className="validation-msg">{this.state.message}</div>

您想要做的是映射此数组并将每个字符串转换为块元素本身，例如<div>：

<div className="validation-msg">
  {this.state.message.map((m, i) => <div key={`message-${i}`}>m</div>)}
</div>

或内联元素，例如每个字符串后面<span>带有一个<br />

<div className="validation-msg">
  {this.state.message.map((m, i) => <span key={`message-${i}`}>m<br /></span>)}
</div>

注意：不要忘记向数组元素添加键。