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 => <span key={`message-${i}`}>m<br /></span>)}
</div>

注意：不要忘记将keys添加到数组元素中。

Answer 2

这里你可以做的是this.state.message是一个数组：

{
     this.state.message.map((el, index) => {
          <div className={validation-msg} key={index}>{el} <br /></div>
     })
}

如果您有类似消息的内容或类似的内容，那么您应该：

{this.state.message && this.state.message.map...}

在你的渲染方法中。

Answer 3

您需要使用<div class='container'> <div class='flex-container'> <div class='flex-overlapping-item'> <h3>Drag photo here</h3> <p>Photo must have 1000px x 1000px</p> </div> <div class='flex-overlapping-item drag-zone'> <div class='drag-zone-content'> </div> </div> </div> </div>来设置html。 Docs

dangerouslySetInnerHTML

但更好的选择是将数据存储在状态中并将其映射到<div className="validation-msg" dangerouslySetInnerHTML={{__html: this.state.message}}></div>函数内的html。

Answer 4

您最好创建一个帮助函数，为您呈现每条错误消息：

generateError(errorMessage, key) {
  return(
    <div className="validation-msg" key={`error-${key}`}>{errorMessage}</div>
  );
}

这个辅助函数可以用它来测试你的代码，并在将来单独修改它，而不会影响你的核心代码结构。

在你的组件中，你可以使用这样的辅助函数，将它包装在map中，它将获取messages数组中的每个元素并将其提供给你的辅助函数：

<div className="validation-msg">
{ 
  this.state.message && this.state.message.length > 0 ? this.state.message.map((msg, key) => {
    return this.generateError(msg, key);
  }) : null;
}
</div>

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

4 个答案: