子组件在父组件重新渲染时重新渲染
子组件在父组件重新渲染时重新渲染
提问于 2019-01-07 00:36:03
我是react的新手，我一直在拆解一个web应用程序，并用react组件替换部分。我现在正在开发一个组件，它包含了我创建的一些不同的组件。
在新组件中，我在componentDidMount函数中进行了一个API调用，并创建子组件。乍一看，一切看起来都很完美，但当我们在其中一个子组件中进行状态更改，然后在父组件中进行更改时，子组件会将其状态重置为更改前的状态。
我知道状态没有被传递给父母是怎么回事，但我不确定是否有我刚刚遗漏的设计，或者我是否需要搬到redux商店才能工作
class Frame extends Component{
constructor(props){
super(props);
this.state = {
tab: "tab1",
tab1: null,
tab2: null,
}
}
componentDidMount() {
let data = this.props.service.getData();
let tab1 = (<Tab1 {...data} />);
let tab2 = (<Tab2 {...data} />);
this.setState({tab1:tab1, tab2:tab2});
}
render(){
if (!this.state.tab1 || !this.state.tab2){
return (<div>Loading</div>)
}
return (
<ul>
<li onClick={()=>{this.setState({tab:"tab1"})}}></li>
<li onClick={()=>{this.setState({tab:"tab2"})}}></li>
<ul>
<div>
{this.state.tab === "tab1" &&
this.state.tab1
}
{this.state.tab === "tab2" &&
this.state.tab2
}
</div>
)
}
}回答 3
Stack Overflow用户
发布于 2019-01-07 08:25:51
axnyff，注释是解决方案。if会在render中再次实例化对象，因为它以前不在那里。如果我使用css类来隐藏它们，它们将只被实例化一次，因为
class Frame extends Component{
constructor(props){
super(props);
this.state = {
tab: "tab1",
tab1: null,
tab2: null,
}
}
componentDidMount() {
let data = this.props.service.getData();
let tab1 = (<Tab1 {...data} />);
let tab2 = (<Tab2 {...data} />);
this.setState({tab1:tab1, tab2:tab2});
}
render(){
if (!this.state.tab1 || !this.state.tab2){
return (<div>Loading</div>)
}
return (
<ul>
<li onClick={()=>{this.setState({tab:"tab1"})}}></li>
<li onClick={()=>{this.setState({tab:"tab2"})}}></li>
<ul>
<div>
<div class=> {this.state.tab !== "tab1" && "hidden"}>
{this.state.tab1}
</div>
<div class=> {this.state.tab !== "tab2" && "hidden"}>
{this.state.tab2}
</div>
</div>
)
}
}
Stack Overflow用户
发布于 2019-01-07 00:56:19
编写一个设置状态的单击处理程序，并将其命名为onClick，而不是直接在render中设置状态。
Stack Overflow用户
发布于 2019-01-07 00:57:33
您使用的是稍有不同的。您应该设置数据。而且componentDidMount只工作一次。
class Frame extends Component {
constructor(props) {
super(props);
this.state = {
tab: 'tab1',
data: null,
};
}
componentDidMount() {
let data = this.props.service.getData();
if (data) {
this.setState({ data });
}
}
render() {
if (this.state.data) {
return <div>Loading</div>;
}
return (
<div>
<ul>
<li
onClick={() => {
this.setState({ tab: 'tab1' });
}}
/>
<li
onClick={() => {
this.setState({ tab: 'tab2' });
}}
/>
</ul>
<div>
{this.state.tab === 'tab1' && <Tab {...this.state.data} />}
{this.state.tab === 'tab2' && <Tab {...this.state.data} />}
</div>
</div>
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54063651
复制相关文章
相似问题