道具更改时反应组件不重新渲染答案

【问题标题】：react component not rerendering when props change道具更改时反应组件不重新渲染
【发布时间】：2021-01-19 22:09:45
【问题描述】：

我正在尝试创建一个模式，询问用户是个人还是组织，然后显示特定于该类型用户的注册模式。这是我目前所拥有的：

父母：

this.state = {
   showInd: false,
   showOrg: false,  
};

changeInd = () => {
    this.setState({
       showInd: !this.state.showInd
     });
     this.props.onClose(); //this closes the initial modal
}
//exact same syntax for changeOrg

render(){

   return( 
     <div onClick={this.changeInd}>
          <FontAwesomeIcon icon={faUser} className="fa-7x icon"/> 
          <span>individual</span>
     </div>
     <div onClick={this.changeOrg}>
         <FontAwesomeIcon icon={faUsers} className="fa-7x icon"/>
         <span>organization</span>
    </div>
    <SignUpInd show={this.state.showInd} />
    <SignUpOrg show={this.state.showOrg} />
)}

和孩子：

render(){
   if (this.props.show){
   return( 
      <various sign up html>
   )}

}

当状态改变时父组件会重新渲染，但子组件不会，即使道具正在改变。我试过使用componentDidUpdate，但是当这里的props改变时也不会触发。

我做错了什么？

编辑：所以我意识到，如果我用回调函数注释掉关闭初始模式的行，signUpInd 模式将正确呈现。为什么我不能两者都做？

【问题讨论】：

onClick={this.showInd} 你在这里指的是状态。请发布整个代码。
请在您的代码中更新函数 showInd()

标签： javascript reactjs react-props

【解决方案1】：

这行得通：

import React from "react";
import SignUpInd from "./SignUpInd";
import SignUpOrg from "./SignUpOrg";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showInd: false,
      showOrg: false
    };
  }

  showInd = () => {
    this.setState((state) => ({ showInd: !state.showInd }));
  };

  showOrg = () => {
    this.setState((state) => ({ showOrg: !state.showOrg }));
  };

  render() {
    return (
      <React.Fragment>
        <div onClick={this.showInd}>
          <FontAwesomeIcon icon={faUser} className="fa-7x icon"/>
          <span>individual</span>
        </div>
        <div onClick={this.showOrg}>
          <FontAwesomeIcon icon={faUsers} className="fa-7x icon"/>
          <span>organization</span>
        </div>
        <SignUpInd show={this.state.showInd} />
        <SignUpOrg show={this.state.showOrg} />
      </React.Fragment>
    );
  }
}

【讨论】：

【解决方案2】：

1.在父组件使用改变状态的函数。

state = {
    showInd: false,
    showOrg: false,  
 };

 stateChange = () =>{
   this.setState({showInd:!this.state.showInd})
 }

2.在 div 上使用 onClick 函数，它会给出与现在相反的值，并将其作为道具传递给下一个组件

      <div onClick={this.stateChange}> //this onClick just flips showInd to the opposite of what it is currently - that's working properly
          
           <span>individual</span>
      </div>
     <SignUpInd show={this.state.showInd} stateChange= {this.stateChange} />

3.在另一端收到道具并控制台记录它

        const {show,stateChange} = this.props
        console.log(show);

【讨论】：