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

Question

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

Answer 1

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

Answer 2

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

Answer 3

Axnyff，评论是解决方案。if将在渲染中再次实例化对象，因为它以前不存在。如果我用一个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>
      )
  }
}