Question

所以我的网络出了问题。让我们说我有一个代码:(我从另一个问题复制此代码，因为它与我类似）

class Foo extends React.Component {
    //... simplified for purpose of this post
    handleChange(field, value, errors) {
        this.setState({field: {value:errors}});  //causes infinite loop when rendering 
    }

    generateProfileTabs () {
        return (
            <Bar
                onCounterChange={::this.handleChange} />
        );
    }
    render() {
         return (          
             <TabList>
                  {this.generateProfileTabs()}
             </TabList>
         );
    }
}    

class Bar extends React.Component {
    //... simplified for purpose of this post
    handleChange(field, value, errors) {
        //pass to parent via callback
        this.props.onCounterChange(field, value, errors);
    }
    render() {
        <FormControl type='text' value={this.state.inputValue} onChange={this.handleChange} />
    }
}

当我第一次加载网页时，这就像一个魅力。子项成功将状态传递给父级，没有无限渲染或任何错误。但是，当我刷新网页时，它将开始渲染并渲染父级（无限循环）。我需要关闭浏览器并重新打开它以使其再次工作，并且当我刷新页面时它将执行无限渲染。你们能帮助我吗？我的代码有什么问题吗？我知道我的回调函数有问题，因为当我删除回调时，我可以刷新页面而不会看到任何无限渲染。非常感谢你

Answer 1

试试这个

render() {
    <FormControl type='text' value={this.state.inputValue} onChange={()=>this.handleChange} />
}

reactjs - 刷新页面时无限渲染

1 个答案: