Reactjs 子组件在父组件重新渲染时重新渲染

我对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>
    )
}
}

类框架扩展组件{
建造师（道具）{
超级（道具）；
此.state={
tab:“tab1”，
表1:null，
表2:null，
}
}
componentDidMount（）{
让data=this.props.service.getData（）；
设tab1=（）；
设tab2=（）；
this.setState（{tab1:tab1，tab2:tab2}）；
}
render（）{
如果（！this.state.tab1 | |！this.state.tab2）{
退货（装货）
}
返回(

{this.setState（{tab:tab1}}}>
{this.setState（{tab:tab2}}}>

{this.state.tab==“tab1”&&
this.state.tab1
}
{this.state.tab==“tab2”&&
this.state.tab2
}
)
}
}

编写一个设置状态的单击处理程序，并将其称为onClick，而不是直接在render中设置状态。

您使用的是稍微不同的。你应该设置数据。而且

componentDidMount

只能工作一次。

类框架扩展组件{
建造师（道具）{
超级（道具）；
此.state={
选项卡：“选项卡1”，
数据：空，
};
}
componentDidMount（）{
让data=this.props.service.getData（）；
如果（数据）{
this.setState（{data}）；
}
}
render（）{
if（this.state.data）{
回装；
}
返回(

{
this.setState（{tab:'tab1'}）；
}}
/>
{
this.setState（{tab:'tab2'}）；
}}
/>

{this.state.tab==='tab1'&&}
{this.state.tab==='tab2'&&}
);
}
}

axnyff，注释是解决方案。if将在render中再次实例化该对象，因为它以前不在那里。如果我使用css类来隐藏它们，它们将只被实例化一次

类框架扩展组件{
建造师（道具）{
超级（道具）；
此.state={
tab:“tab1”，
表1:null，
表2:null，
}
}
componentDidMount（）{
让data=this.props.service.getData（）；
设tab1=（）；
设tab2=（）；
this.setState（{tab1:tab1，tab2:tab2}）；
}
render（）{
如果（！this.state.tab1 | |！this.state.tab2）{
退货（装货）
}
返回(

{this.setState（{tab:tab1}}}>
{this.setState（{tab:tab2}}}>

{this.state.tab！==“tab1”&&“hidden”}>
{this.state.tab1}
{this.state.tab！==“tab2”&&&“hidden”}>
{this.state.tab2}
)
}
}

每次更改选项卡时都会卸载子组件，因此它们的本地状态将丢失。您应该始终渲染子组件（可能只是隐藏它们），或者将其状态保留在父组件中。另一方面，最好是将数据保存在组件中，而不是保存在渲染组件中。我只是使用css类移动了if逻辑来隐藏它们。因为if逻辑没有停止其他选项卡的渲染，所以它们只渲染一次。非常感谢。

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>
  );
 }
 }