Reactjs 将JSON数据从Django传递到React组件

我正在尝试使用Django和React开发一个“Yahoo Finance”风格的应用程序。dashboard视图为users公文包创建JSON数据，然后在上下文中将其传递给html模板，我想在这里使用它来创建React组件。例如，JSON输出如下所示：

{'PENN': {'name': 'Penn National Gaming, Inc', 'price': '56.5900'}, 'WMT': {'name': 'Walmart Inc', 'price': '140.0400'}}

我遇到的麻烦是使用props中的JSON数据并将其映射到HTML元素

views.py：

def dashboard(request):
    user = Profile.objects.get(user=request.user)
    positions = user.positions.all()
    data_response = {}
    for position in positions:
        position_data = {}
        response = requests.get("https://www.alphavantage.co/query?function=OVERVIEW", params={"symbol": position.symbol, "apikey": key})
        data = response.json()
        name = data["Name"]
        position_data["name"] = name
        response = requests.get("https://www.alphavantage.co/query?function=TIME_SERIES_DAILY", params={"symbol": position.symbol, "apikey": key})
        data = response.json()
        price = data["Time Series (Daily)"]["2020-10-28"]["4. close"]
        position_data["price"] = price
        data_response[position.symbol] = position_data
    print(data_response)
    return render (request, "holdings/dashboard.html", {
        'data_response': data_response
    })

dashboard.html：

<div id="app" />
      <script type="text/babel">
    
        class App extends React.Component {
          render() {
            return (
    
              <UserPosition data='{{ data_response }}' />
    
            );
          }
        }
    
        class UserPosition extends React.Component {
          render() {
            return (
              {data.map(item => (
            <div class="col-3">
              <div class="asset__container flex flex-horizontal">
                <div>
                  <h4>{ item.name }</h4>
                </div>
              </div>
            </div>
          ))}
            );
          }
        }
    
        ReactDOM.render(<App />, document.querySelector("#app"));
    
      </script>

类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
类UserPosition扩展了React.Component{
render（）{
返回(
{data.map（项=>(
{item.name}
))}
);
}
}
ReactDOM.render（，document.querySelector（“#app”）；

---

此外，在我深入项目之前，我希望您能提供关于这些API请求是应该在服务器端还是客户端进行的任何信息。

在模板上执行以下操作：

<UserPosition data={JSON.parse(`{{ data_response }}`)} />

---

我认为您在向组件传递数据时忘记了

{}

---

谢谢您的回复。这似乎不起作用，但我已经用我所取得的进展更新了代码。在添加data.map部分之前，我成功地显示了原始JSON数据。现在我正试图遍历数据并以正确的html格式输出它，但它不再工作了。