时间戳

首页 > 解决方案 > 拆分数组中的元素并添加换行符，然后加入 - Javascript

javascript - 拆分数组中的元素并添加换行符，然后加入 - Javascript

问题描述

我正在通过 reactjs 中的数据进行映射。这个 JSX：

{place.venue.location.formattedAddress}

正在通过这个 axios 数据请求进行映射，特别是我的响应中的这个数组：

formattedAddress: Array(5)
0 : "Chester Rd"
1 : "London"
2 : "Greater London"
3 : "NW1 4NR"
4 : "United Kingdom"

结果，当我进行映射时，它会在一句话中返回数据，所有数据都连接在一起。就像这样：

Serpentine RdHyde ParkGreater LondonW2 2TP

我正在尝试使用换行符进行映射、拆分和连接，但它不起作用。我的地址完全停止出现。我究竟做错了什么？

这是我的代码，（我已经切片，所以我可以从地址末尾删除国家）。

{place.venue.location.formattedAddress.slice(0,4).split(',').join('<br />')}

标签： javascriptarraysreactjsjoinsplit

解决方案

class App extends React.Component{
  render(){
    var arr = ["hello", "there", "world"]
    return(
      <div>
        {arr.map(s=><React.Fragment>{s}<br/></React.Fragment>)}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("app"))
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>

1 您正在调用split数组，但它是一个字符串方法。

2 你不能使用 join using '<br />'。jsx将其视为字符串。

你应该映射你的数组元素并返回一个 jsx 数组。

{place.venue.location.formattedAddress.slice(0,4).map(s=><React.Fragment>s <br/></React.Fragment>)}

推荐阅读