javascript - 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是一个数组，将其强制转换为字符串与通过将其包含的所有元素单独强制转换为字符串(在本例中它们已经是字符串)并在其间添加一个逗号来连接它所包含的所有元素相同:

console.log(
 ['a', 'b','c'].toString() // logs: a,b,c
)

你想要做的是映射这个数组并将每个字符串转换成一个 block element本身，就像一个<div> :

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

或 inline element例如<span>用<br />在每个字符串之后

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

注意:不要忘记添加 keys到你的数组元素。