node.js - 状态更改后反应组件不渲染
问题描述
正如标题所说,当我的组件中的状态发生变化时,子组件不会重新渲染。
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 中,它会渲染其他在状态更改期间会重新渲染的子组件。
任何信息表示赞赏
编辑更新以添加爱马仕工作人员,文件超过 100 行,所以我剪掉并只粘贴了我认为对问题很重要的东西,如果需要可以提供更多
解决方案
我测试了该代码,它似乎工作正常。您能否提供 HermesWorker 组件中设置的内容?
编辑:您需要setState
在组件更新时设置您的状态。为此,您可以查找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 移到了它自己的函数中,但这完全取决于你。
另请注意,我将 url 添加到状态。确保设置好道具以避免意外行为。
编辑2:componentDidUpdate
将您prevProps
和prevState
作为参数。prevProps
您可以访问上一次更新中获得的任何道具,并且正如您prevState
可能猜到的那样,您可以访问上一次更新中的任何状态。“上一次更新”是指在更新执行之前。
推荐阅读
- powerbi - Power BI:“我们无法在此本机查询之上折叠”
- android - PresentationFragment 在 android 中膨胀缓慢
- flutter - Flutter 打开列表项上方的弹出菜单
- gcc - 在 POWER9 上构建 GLib
- backup - 如果一个集群节点丢失,Marklogic 数据库备份会怎样?
- r - MCMC 输出未读取完整向量
- python - 如何在 Python 中修改 Matplot 图表间隔?
- javascript - window.focus 无法使用 JavaScript;window.close 有效吗?
- docker - 使用 Jenkinsfile 运行 docker 容器的正确方法
- python - 来自 URL 的天气图标未显示在 Label Tkinter 中?