[英]React component not rendering after state change
As the title says, when my state changes in my component, the sub components aren't rerendering.正如标题所说,当我的 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
here is hermesworker.js这是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>
)
}
}
Essentially the issue is that the HermesWorker component is not being rerendered to use the new url prop.本质上问题是 HermesWorker 组件没有被重新渲染以使用新的 url 属性。 I am not sure why this is happening because for example, in the hermesworker it renders other subcomponents that do get rerendered during a state change.
我不确定为什么会发生这种情况,因为例如,在 hermesworker 中,它渲染了在 state 更改期间重新渲染的其他子组件。
Any information is appreciated任何信息表示赞赏
EDIT updated to add hermes worker, the file is over 100 lines so i cut out and only pasted the stuff I thought was important to the issue, can supply more if needed编辑更新以添加爱马仕工作人员,文件超过 100 行,所以我剪掉并只粘贴了我认为对问题很重要的东西,如果需要可以提供更多
I tested that code and it seems to be working fine.我测试了该代码,它似乎工作正常。 Could you provide What is set in HermesWorker component?
您能否提供 HermesWorker 组件中设置的内容?
Edit: You'll require to set your state with setState
on component updates.编辑:您需要在组件更新时使用
setState
设置 state。 To do this, you may look for componentDidUpdate
, which will run on every update.为此,您可以查找
componentDidUpdate
,它将在每次更新时运行。 This is different from componentDidMount
, which (hopefully) will run once and then the component may update and re-render, but re-render it's not considered as "mount".这与
componentDidMount
不同,后者(希望)将运行一次,然后组件可能会更新并重新渲染,但重新渲染它不被视为“挂载”。 So you may try this instead:所以你可以试试这个:
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 }));
}
Note: I moved the fetch to its own function, but that's completly up to you.注意:我将 fetch 移至其自己的 function,但这完全取决于您。
Also notice i added url to the state.另请注意,我将 url 添加到 state。 Make sure to keep your props set to avoid unexpected behaviours.
确保设置好道具以避免意外行为。
Edit 2: componentDidUpdate
will hand you prevProps
and prevState
as parameters.编辑 2:
componentDidUpdate
会将prevProps
和prevState
作为参数传递给您。 With prevProps
you get access to whatever props you got on the previous update, and with prevState
, as you may guess, you get access to whatever-your-state-was on the previous update.使用
prevProps
您可以访问您在上一次更新中获得的任何道具,并且使用prevState
,您可能会猜到,您可以访问上一次更新中的任何状态。 And by "on the previous update" i mean before the update got executed. “上一次更新”是指在更新执行之前。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.