調用 setState 時，Javascript 實例變量未在 React class 組件中呈現

Question

一個反應 class 組件安裝到 html 根節點。 它的主體中有兩個反應元素h1標簽。 一個h1元素在 render 方法中直接渲染。 另一個h1在 React 組件 class 中被清除，並作為變量傳遞給 Render function。

import React, { Component } from "react";

export default class Test extends Component {
  state = {
    count: 0,
  };

  current_count = (<h1>current count is {this.state.count}</h1>);

  render() {
    return (
      <>
        {this.current_count}
        <h1>current count is {this.state.count}</h1>
        <button
          onClick={() => {
            this.setState({ count: this.state.count + 1 });
          }}
        >
          click me
        </button>
      </>
    );
  }
}

當我單擊按鈕時，它應該增加count ，只有渲染 function 中的反應元素h1將使用它的 state 內容進行更新。

下圖顯示了當我單擊按鈕 4 次時顯示計數為 4 的第二個h1標簽。

Answer 1

您的current_count是在構造函數中創建的屬性，在掛載之前，然后才創建。 您當前的代碼就像

export default class Test extends Component {
  constructor() {
    this.state = {
      count: 0,
    };
    this.current_count = (<h1>current count is {this.state.count}</h1>);
  }

並且構造函數只運行一次。

您將需要一些其他方法來更新它。 最好的方法是只在渲染時生成 JSX——也許有一個 function 而不是返回<h1> 。

 class Test extends React.Component { state = { count: 0, }; getCurrentCount() { return ( <h1>current count is {this.state.count}</h1> ); } render() { return ( <React.Fragment> {this.getCurrentCount()} <h1>current count is {this.state.count}</h1> <button onClick={() => { this.setState({ count: this.state.count + 1 }); }} > click me </button> </React.Fragment> ); } } ReactDOM.createRoot(document.querySelector('.react')).render(<Test />);

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div class='react'></div>