javascript - 在 this.setState() 之后 Reactjs 没有重新渲染
问题描述
我正在使用 spotify 的 api 并检索要设置为状态的字符串数组,以便通过 JSX 映射到 HTML。
将它记录到控制台表明我确实将正确的数组存储到状态中,但 React 永远不会重新渲染以显示它们。如果我在使用自己的值之后再次设置状态,则该页面可以正常工作。也许这是异步的问题?
import React from 'react';
import Button from 'react-bootstrap/esm/Button';
import Spotify from 'spotify-web-api-js';
import Track from './Track';
import Api from '../Api.js'
export default class OtherPage extends React.Component{
constructor(props){
super(props);
this.state = {
artists:['artists']
};
this.getArtists = this.getArtists.bind(this);
}
async getArtists(){
let api = new Api();
let arr = await api.getTopArtists();
console.log('arr', arr);
this.setState({artists: arr});
console.log('new-arr', this.state.artists);
// this.setState({artists: ['noe', 'tow', 'tre']})
// console.log('new-new-arr', this.state.artists)
}
render(){
return(
<div>
<h1>My Spotify React App!</h1>
<div className="tracks-container" style={{maxHeight: 500, overflow: 'scroll', margin:50, marginTop:25}}>
{this.state.artists.map((artist) =>
<p>Artist: {artist}</p>
)}
<button onClick={() => this.getArtists()}>Get Top Artists</button>
</div>
</div>
);
};
}
这是 getTopArtists() 的代码
import React from 'react';
import { Component } from 'react';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Redirect, BrowserRouter as Router, Route, Switch, useHistory } from 'react-router-dom';
class Api extends React.Component{
async getTopArtists(){
let arr = [];
let artists = await fetch("https://api.spotify.com/v1/me/top/artists", {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer '+ localStorage.getItem('access_token')
}
}
).then((response) => {
console.log(response.json().then(
(data) => data.items.forEach(item => arr.push(item.name))
)
)});
console.log(arr);
return arr;
}
}
export default Api;
解决方案
很难确定,但我会尝试两个改变:
第一的,
this.setState({artists: [...arr]});
这会强制创建一个新数组,以防万一api.getTopArtists();
它以某种方式重用相同的数组以获得它的结果,这可能导致 React 无法检测到更改。
第二,
{this.state.artists.map((artist) =>
<p key={artist}>Artist: {artist}</p>
)}
由于列表上没有键,因此当后备数组发生变化时,很难做出反应来知道列表中发生了什么变化。可能不是问题,但可能是。
推荐阅读
- excel - 为什么我的电子表格不能识别重复的日期/时间?
- flutter - 如何在 Flutter 中使用 Stackdriver
- reactjs - 开玩笑测试 - 独特的“关键”道具错误。检查xyz的渲染方法
- spring-cloud-stream - 使用用于 Spring Cloud Stream 的 Solace binder 支持直接、非持久消息传递
- angular - 登录页面后添加侧菜单页面(空白标签)
- rest - 如何将数据从 BMC Remedy 推送到 Spring Boot 应用程序?
- google-apps-script - 如何使用基于时间的触发器每小时运行一个脚本,仅在工作日的每小时运行一次?
- .net - 从 .Net Core 2.0 Web 应用程序中的 apppsettings.json 文件中读取值
- oracle - 如何在 oracle 中删除计算日期的周末
- curl - Ubuntu 18、VPN 和 DNS:curl 无法解析 VPN-host,但 nslookup 和 dig 可以