时间戳

首页 > 解决方案 > 在 React 中，如何从 Last.fm API 中转义 Hash 标记

javascript - 在 React 中，如何从 Last.fm API 中转义 Hash 标记

问题描述

我正在使用 Last.fm API 构建一个 React 应用程序。他们在艺术家图像 url 的键中使用了 # 标签，见下文。不幸的是 # 正在使 React 崩溃。我在网上搜索过，找不到任何关于如何逃避这个角色的信息。“大小”键工作正常

image
:
Array(6)
0
  :
{#text: "https://lastfm- 
img2.akamaized.net/i/u/34s/4b89e84da385d17e6b46c489f46d4522.png",
 size: 
"small"}
1
:
{#text: "https://lastfm- 
img2.akamaized.net/i/u/64s/4b89e84da385d17e6b46c489f46d4522.png",
 size: 
"medium"}
 ..........................

反应代码如下：

import React, { Component } from 'react';
import './App.css';
import Title from './components/Title.js';
import Form from './components/Form.js';
import Music from './components/Music.js';

const API_KEY = '.....';
//const SECRET = '......';

  class App extends Component {
     state = {
     name: undefined,
     bio: undefined,
     listeners: undefined,
     image: undefined,
     error: undefined
   }
getMusic = async (e) => {
e.preventDefault();
 const name=e.target.elements.artist.value;
 const api_call = await fetch(`http://ws.audioscrobbler.com/2.0/? 
 method=artist.getinfo&artist=${name}&api_key=${API_KEY}&format=json`)
 const data = await api_call.json();
 console.log(data);
 this.setState({
   name: data.artist.name,
   bio: data.artist.bio.summary,
   image: data.artist.image[1]#text,
   error: ""
  });
  }
  render() {
    return (
      <div className="App">
       <Title />
       <Form getMusic={this.getMusic}/>
       <Music name={this.state.name}
             bio={this.state.bio}
             image={this.state.image}
             error={this.state.error}
       />
      </div>
    );
  }
}

export default App;

有人可以帮忙吗？

标签： javascriptreactjsjsxlast.fm

解决方案

只需使用文本标识符：

data.artist.image[1]['#text']

如果要使用点语法，则键必须是有效的 Javascript 标识符。

推荐阅读