私のコンポーネントは再レンダリングしません

Question

ボタンをクリックすると、コンソールに「1」が表示されますが、「2」は表示されません。それはなぜ起こるのですか？この問題を解決してもらえますか？私は本当になぜ私の2番目のコンポーネントが更新されないのかわかりません。あなたの例では

class App extends PureComponent { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     name: 'Vasya' 
 
    } 
 
    this._onChange = this._onChange.bind(this); 
 
    } 
 

 
    _onChange(name) { 
 
    this.setState({ 
 
     name: name 
 
    }); 
 
    } 
 
    
 
    render() { 
 

 
    console.log(1); 
 

 
    return { 
 
     <div> 
 
     <Button onClick={this._onChange('Petr')} /> 
 
     <AnotherComponent username={this.state.name} /> 
 
     </div> 
 
    } 
 
    } 
 
} 
 

 
class AnotherComponent extends PureComponent { 
 
    const { 
 
     username 
 
    } = this.props 
 
    
 
    render() { 
 

 
    console.log(2); 
 

 
    return { 
 
     <div> 
 
     test 
 
     </div> 
 
    } 
 
    } 
 
} 
 

 
export default App;

Answer 1

いくつかのコードの問題！

• はあなたが返す（レンダリングからの要素）と反応するとき、それらは括弧に包まれなければなりません（）ない中括弧{}
• 使用React.Component、ないReact.PureComponent、またはあなたが問題を取得します
：あなたがレンダリングする場合、この行 -
• <ボタン>は、主な問題は、その後、無限ループです<ボタンを使用し>

、ものではありません3210

<Button onClick={this._onChange('Petr')} /> 

...レンダリング時に_onChange（）関数を呼び出し、その結果をonClick propとしてButtonに渡します。これはあなたが望むものではありません。あなたはonClick propを_onChange（）を呼び出す関数にします。だから、

<button onClick={() => this._onChange('Petr')} /> 

全作業例：

class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     name: 'Vasya' 
 
    } 
 
    this._onChange = this._onChange.bind(this); 
 
    } 
 

 
    _onChange(name) { 
 
    this.setState({ 
 
     name: name 
 
    }); 
 
    } 
 
    
 
    render() { 
 

 
    console.log(1); 
 

 
    return (
 
     <div> 
 
     <button onClick={() => this._onChange("Petr") } /> 
 
     <AnotherComponent username={this.state.name} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class AnotherComponent extends React.Component { 
 
    
 
    render() { 
 

 
    console.log(2); 
 

 
    return (
 
     <div> 
 
     test 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>