子组件重新渲染，父组件重新渲染

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

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

Answer 2

编写一个设置状态的点击处理程序，然后将其称为onClick而不是直接在渲染中设置状态。

Answer 3

您使用的有点不同。您应该设置数据。 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>
  );
 }
 }