React Fragment 未在函数中呈现
React Fragment not rendering in function
下面是我的 React 组件,有人能理解为什么 react.Fragment 在 getResults 函数中根本不呈现吗?
我希望它最终显示 api 响应的结果。
我的 api 查询工作正常,我可以获得我想要的数据,但我很难在组件中显示它。
import React from "react";
import axios from "axios";
import SearchInput, {
createFilter
} from "react-search-input";
import {
spotifySearchURL
} from "../../constants";
export class SearchPanel extends React.Component {
constructor(props) {
super(props);
this.state = {
searchValue: "",
tracks: {},
selectedOption: null
};
this.handleSearch = this.handleSearch.bind(this);
}
getSearchValue(value, token) {
this.setState({
searchValue: value
});
this.handleSearch(value, token);
console.log(value);
}
getResults() {
let tracks = this.state.tracks;
let track;
Object.keys(tracks).map(function(key, items) {
track = tracks[key];
console.log(track, track.name);
return (
<React.Fragment >
<h1 > {track.name} < /h1>
</React.Fragment>
);
});
}
handleSearch = (value, token) => {
const encoded = encodeURIComponent(value);
let url = `${spotifySearchURL}${encoded}&type=track`;
console.log(url);
const params = {
headers: {
Authorization: " Bearer " + token,
accept: "application/json",
"Content-Type": "application/x-www-form-urlencoded"
},
data: null
};
axios
.get(url, params)
.then(response => {
this.setState({
tracks: response.data.tracks.items
});
console.log(response.data.tracks.items);
})
.catch(error => {
console.log(error);
});
};
render() {
return (
<div className ="search-panel">
<SearchInput
className = "search-input"
value = {
this.state.searchValue
}
onChange = {
value => this.getSearchValue(value, this.props.token)
}
/>
{this.getResults()}
</div>
);
}
}
export default SearchPanel;
您必须 return 从 getResults
到 map
的 return 数组。
getResults() {
let { tracks } = this.state;
let track;
return Object.keys(tracks).map(function(key, items) {
track = tracks[key];
return (
<React.Fragment>
<h1> {track.name} </h1>
</React.Fragment>
);
});
}
下面是我的 React 组件,有人能理解为什么 react.Fragment 在 getResults 函数中根本不呈现吗?
我希望它最终显示 api 响应的结果。
我的 api 查询工作正常,我可以获得我想要的数据,但我很难在组件中显示它。
import React from "react";
import axios from "axios";
import SearchInput, {
createFilter
} from "react-search-input";
import {
spotifySearchURL
} from "../../constants";
export class SearchPanel extends React.Component {
constructor(props) {
super(props);
this.state = {
searchValue: "",
tracks: {},
selectedOption: null
};
this.handleSearch = this.handleSearch.bind(this);
}
getSearchValue(value, token) {
this.setState({
searchValue: value
});
this.handleSearch(value, token);
console.log(value);
}
getResults() {
let tracks = this.state.tracks;
let track;
Object.keys(tracks).map(function(key, items) {
track = tracks[key];
console.log(track, track.name);
return (
<React.Fragment >
<h1 > {track.name} < /h1>
</React.Fragment>
);
});
}
handleSearch = (value, token) => {
const encoded = encodeURIComponent(value);
let url = `${spotifySearchURL}${encoded}&type=track`;
console.log(url);
const params = {
headers: {
Authorization: " Bearer " + token,
accept: "application/json",
"Content-Type": "application/x-www-form-urlencoded"
},
data: null
};
axios
.get(url, params)
.then(response => {
this.setState({
tracks: response.data.tracks.items
});
console.log(response.data.tracks.items);
})
.catch(error => {
console.log(error);
});
};
render() {
return (
<div className ="search-panel">
<SearchInput
className = "search-input"
value = {
this.state.searchValue
}
onChange = {
value => this.getSearchValue(value, this.props.token)
}
/>
{this.getResults()}
</div>
);
}
}
export default SearchPanel;
您必须 return 从 getResults
到 map
的 return 数组。
getResults() {
let { tracks } = this.state;
let track;
return Object.keys(tracks).map(function(key, items) {
track = tracks[key];
return (
<React.Fragment>
<h1> {track.name} </h1>
</React.Fragment>
);
});
}