[英]React component not rendering after state change
正如標題所說,當我的 state 在我的組件中發生變化時,子組件不會重新渲染。
class App extends Component {
constructor() {
super()
this.state = {
url: ""
}
this.handleWorkerSelect = this.handleWorkerSelect.bind(this)
}
handleWorkerSelect(url) {
this.setState({ url })
}
render() {
return (
<div className="App">
<Workers className="workers" handleClick={this.handleWorkerSelect}/>
<HermesWorker url={this.state.url}/>
</div>
)
}
}
const Workers = (props) => {
return (
<div>
<button onClick={() => props.handleClick("http://localhost:5000/api")}>Worker 1</button>
<button onClick={() => props.handleClick("http://localhost:2000/api")}>Worker 2</button>
</div>
)
}
export default App
這是hermesworker.js
class HermesWorker extends Component {
constructor() {
super()
this.state = {
items: [],
visited: [{name: "This Drive", path: "@back", root: ""}]
}
this.handleFolderClick = this.handleFolderClick.bind(this)
this.handleFileClick = this.handleFileClick.bind(this)
}
componentDidMount() {
if (this.props.url.length === 0) return
fetch(this.props.url)
.then(res => res.json())
.then(items => this.setState({ items }))
}
render() {
const folders = this.state.items.map((item) => {
if (!item.isfile) {
return <Card handleClick={this.handleFolderClick} root={item.root} path={item.path} isfile={item.isfile} name={item.name} size={item.size}/>
}
})
const files = this.state.items.map((item) => {
if (item.isfile) {
return <Card handleClick={this.handleFileClick} root={item.root} path={item.path} isfile={item.isfile} name={item.name} s ize={item.size}/>
}
})
const pathButtons = this.state.visited.map((item) => {
return <PathButton handleClick={this.handleFolderClick} root={item.root} path={item.path} name={item.name}/>
})
return (
<div>
{pathButtons}
<div className="flex-container">
{folders}
{files}
</div>
</div>
)
}
}
本質上問題是 HermesWorker 組件沒有被重新渲染以使用新的 url 屬性。 我不確定為什么會發生這種情況,因為例如,在 hermesworker 中,它渲染了在 state 更改期間重新渲染的其他子組件。
任何信息表示贊賞
編輯更新以添加愛馬仕工作人員,文件超過 100 行,所以我剪掉並只粘貼了我認為對問題很重要的東西,如果需要可以提供更多
我測試了該代碼,它似乎工作正常。 您能否提供 HermesWorker 組件中設置的內容?
編輯:您需要在組件更新時使用setState
設置 state。 為此,您可以查找componentDidUpdate
,它將在每次更新時運行。 這與componentDidMount
不同,后者(希望)將運行一次,然后組件可能會更新並重新渲染,但重新渲染它不被視為“掛載”。 所以你可以試試這個:
constructor(props) {
super(props);
this.state = {
url: '',
items: [],
visited: [{name: "This Drive", path: "@back", root: ""}]
}
this.fetchData = this.fetchData.bind(this);
}
componentDidMount() {
//Mount Once
}
componentDidUpdate(prevProps, prevState) {
if (this.state.url !== this.props.url) {
this.setState({url: this.props.url});
// Url state has changed.
}
if(prevState.url !== this.state.url){
//run your fetch
this.fetchData();
}
}
fetchData(){
if (this.props.url.length === 0) return
fetch(this.props.url)
.then(res => res.json())
.then(items => this.setState({ items }));
}
注意:我將 fetch 移至其自己的 function,但這完全取決於您。
另請注意,我將 url 添加到 state。 確保設置好道具以避免意外行為。
編輯 2: componentDidUpdate
會將prevProps
和prevState
作為參數傳遞給您。 使用prevProps
您可以訪問您在上一次更新中獲得的任何道具,並且使用prevState
,您可能會猜到,您可以訪問上一次更新中的任何狀態。 “上一次更新”是指在更新執行之前。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.