React DOM 即使 state 和 props 有也没有更新
React DOM not updating even though the state and props have
我希望使用 map() 迭代并添加到我的 DOM 中,但是,我的 DOM 没有更新。
我认为所有内容在语法上都写得很好,所以我真的被这个难住了。如果您能给我任何帮助,我将不胜感激,谢谢。
App.js
class App extends Component {
...
searchThis() {
axios.get("/getYoutube", {params: {searchString: this.state.searchVal}}).then(({ data }) => {
this.setState({
youtubeVids: data.resp.items
})
})
}
render() {
if (this.state.youtubeVids.length > 0) {
console.log(this.state.youtubeVids[0].snippet.thumbnails.default.url)
return (
<div className="app-container">
<div className="app-header">
<h1>YouTube API App</h1>
</div>
<div className="app-body">
<div className="each-body-section">
<SearchResults
youtubeVids = {this.state.youtubeVids}
/>
</div>
</div>
</div>
);
}
}
}
export default App;
现在我正在使用 setState()
和 Axios 通过 searchThis()
方法将服务器 api 结果带到前端,我正在从我的 props
。但是在 SearchResults.js 中,DOM 中没有任何更新
SearchResults.js
import React from "react";
const SearchResults = props => {
console.log("props in search ", props.youtubeVids)
return (
<div className="each-body-section video-container">
{props.youtubeVids.map((video) => {
<div key={video.id.videoId}>
<div className="video-title">
<h2>{video.snippet.title} </h2>
</div>
<div>
<img src={video.snippet.thumbnails.high.url} />
</div>
<div>
<p>{video.snippet.description}</p>
</div>
</div>
})}
</div>
)
}
export default SearchResults
嗯,这是因为您正试图在 SearchResults.js
中映射一个空数组
将 SearchResults.js 更改为以下代码,然后重试:
import React, { Component } from 'react';
class SearchResults extends Component {
render() {
console.log(this.props.youtubeVids);
if (this.props.youtubeVids.length > 0) {
var youtubeVidsMap = this.props.youtubeVids.map((video) => <div key={video.id.videoId}>
<div className="video-title">
<h2>{video.snippet.title} </h2>
</div>
<div>
<img src={video.snippet.thumbnails.high.url} />
</div>
<div>
<p>{video.snippet.description}</p>
</div>
</div>);
}
return (
<div className="each-body-section video-container">
{youtubeVidsMap}
</div>
);
}
}
export default SearchResults;
如果你想使用无状态组件,下面的代码应该可以工作:
import React from "react";
const SearchResults = props => {
if (props.youtubeVids.length > 0) {
var youtubeVidsMap = props.youtubeVids.map((video) => <div key={video.videoId}>
<div className="video-title">
<h2>{video.snippet.title} </h2>
</div>
<div>
<img src={video.snippet.thumbnails.high.url} />
</div>
<div>
<p>{video.snippet.description}</p>
</div>
</div>);
}
return (
<div className="each-body-section video-container">
{youtubeVidsMap}
</div>
)
}
export default SearchResults
我希望使用 map() 迭代并添加到我的 DOM 中,但是,我的 DOM 没有更新。
我认为所有内容在语法上都写得很好,所以我真的被这个难住了。如果您能给我任何帮助,我将不胜感激,谢谢。
App.js
class App extends Component {
...
searchThis() {
axios.get("/getYoutube", {params: {searchString: this.state.searchVal}}).then(({ data }) => {
this.setState({
youtubeVids: data.resp.items
})
})
}
render() {
if (this.state.youtubeVids.length > 0) {
console.log(this.state.youtubeVids[0].snippet.thumbnails.default.url)
return (
<div className="app-container">
<div className="app-header">
<h1>YouTube API App</h1>
</div>
<div className="app-body">
<div className="each-body-section">
<SearchResults
youtubeVids = {this.state.youtubeVids}
/>
</div>
</div>
</div>
);
}
}
}
export default App;
现在我正在使用 setState()
和 Axios 通过 searchThis()
方法将服务器 api 结果带到前端,我正在从我的 props
。但是在 SearchResults.js 中,DOM 中没有任何更新
SearchResults.js
import React from "react";
const SearchResults = props => {
console.log("props in search ", props.youtubeVids)
return (
<div className="each-body-section video-container">
{props.youtubeVids.map((video) => {
<div key={video.id.videoId}>
<div className="video-title">
<h2>{video.snippet.title} </h2>
</div>
<div>
<img src={video.snippet.thumbnails.high.url} />
</div>
<div>
<p>{video.snippet.description}</p>
</div>
</div>
})}
</div>
)
}
export default SearchResults
嗯,这是因为您正试图在 SearchResults.js
中映射一个空数组将 SearchResults.js 更改为以下代码,然后重试:
import React, { Component } from 'react';
class SearchResults extends Component {
render() {
console.log(this.props.youtubeVids);
if (this.props.youtubeVids.length > 0) {
var youtubeVidsMap = this.props.youtubeVids.map((video) => <div key={video.id.videoId}>
<div className="video-title">
<h2>{video.snippet.title} </h2>
</div>
<div>
<img src={video.snippet.thumbnails.high.url} />
</div>
<div>
<p>{video.snippet.description}</p>
</div>
</div>);
}
return (
<div className="each-body-section video-container">
{youtubeVidsMap}
</div>
);
}
}
export default SearchResults;
如果你想使用无状态组件,下面的代码应该可以工作:
import React from "react";
const SearchResults = props => {
if (props.youtubeVids.length > 0) {
var youtubeVidsMap = props.youtubeVids.map((video) => <div key={video.videoId}>
<div className="video-title">
<h2>{video.snippet.title} </h2>
</div>
<div>
<img src={video.snippet.thumbnails.high.url} />
</div>
<div>
<p>{video.snippet.description}</p>
</div>
</div>);
}
return (
<div className="each-body-section video-container">
{youtubeVidsMap}
</div>
)
}
export default SearchResults