為什么狀態值沒有反映在 ReactJS 中？

Question

class App extends Component {
  state = {
    name: ""
  };
  abc() {
    console.log("ddd");
    this.setState({
      name: "asd"
    });
  }
  render() {
    return <div>ddd{this.state.name}</div>;
  }
}

this.state.name沒有反映。 https://codesandbox.io/s/vigorous-sky-woxr7

我從外面調用這個函數。

我想從外部調用組件函數並更新狀態。

Answer 1

這不是你編寫 React 代碼的方式。 你應該做這樣的事情：

import React, { Component } from 'react';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      name: ""
    }
  }

  setName = _ => {
    this.setState({ name: 'John Doe' })
  }

  render() {
    return (
      <>
        <div>
          {`This is my name: ${this.state.name}`}
        </div>
        <button onClick={this.setName}>Click me to see my name!</button>
      </>
    );
  }
}

export default App;

需要考慮的兩個重要關鍵：

1. 狀態必須在構造函數中啟動
2. 您必須有一個特定的函數來更新您可以從任何地方調用的狀態。 如果您想在生命周期開始時啟動它，請使用componentDidWount()方法。

---

更新：如果您想從該組件外部調用它

在這種情況下，您將有兩個不同的組件，如果您想從子組件調用一個方法，您應該執行以下操作：

父組件

import React, { Component } from 'react';
import MyComponent from './MyComponent'

class App extends Component {
   onClick = () => {
    this.myComponent.method()
  }
  render() {
    return (
      <div>
        <MyComponent onRef={ref => (this.myComponent = ref)} />
        <button onClick={this.onClick}>MyComponent.method()</button>
      </div>
    );
  }
}

export default App;

子組件

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    this.props.onRef(this)
  }
  componentWillUnmount() {
    this.props.onRef(undefined)
  }
  method() {
    window.alert('Hello there, my name is John Doe!')
  }
  render() {
    return <h1>Example of how to call a method from another component</h1>
  }
}

export default MyComponent;

看看這里的一個活生生的例子： https : //repl.it/repls/AfraidNecessaryMedia

Answer 2

我建議你在類中調用你的類方法，但如果你想解決你的問題，請在 index.js 上使用React.createRef() ：

const rootElement = document.getElementById("root");
const ref = React.createRef();
ReactDOM.render(<App ref={ref} />, rootElement);
ref.current.abc();

https://codesandbox.io/embed/sleepy-glitter-fwplz

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";
window.a = function() {
  ref.current.abc();
};

class App extends Component {
  state = {
    name: ""
  };
  abc() {
    console.log("ddd");
    this.setState({
      name: "asd"
    });
  }
  render() {
    return <div>ddd{this.state.name}</div>;
  }
}

const rootElement = document.getElementById("root");
const ref = React.createRef();
ReactDOM.render(<App ref={ref} />, rootElement);
window.a();

Answer 3

這個怎么樣？

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ""
    };
  }

  componentDidMount() {
    this.abc();
  }

  abc() {
    console.log("ddd");
    this.setState({
      name: "asd"
    });
  }

  render() {
    return <div>ddd {this.state.name}</div>;
  }
}

Answer 4

您調用該函數的方式不正確。
請記住：需要調用一個函數...
對於您的第二個問題：您不能將函數從孩子調用到父母。
在這種情況下，您應該在父級中創建一個函數，發送給子級，然后在事件（組件加載、單擊等）上調用它。
如果您真的需要這樣做：將數據、函數等從子級發送到父級...檢查 Redux ： https : //redux.js.org/

這是您的代碼工作（功能 abc 變化不大）：

import React, { Component, Fragment } from "react"
import ReactDOM from "react-dom"    
import "./styles.css"

window.a = function() {
  var ab = new App()
  ab.abc()
}

class App extends Component {

state = {
    name: ""
  }

  abc = () => {
    this.setState({ name: "new name" })
  }

  render() {
    return (
      <Fragment>
        <div>{this.state.name}</div>
        <button onClick={this.abc}>call function</button>
      </Fragment>
    );
  }
}

const rootElement = document.getElementById("root")
ReactDOM.render(<App />, rootElement)
window.a()

請注意使用';' 在每一行的末尾，不是編寫 React js 的正確方法。
最佳實踐鏈接： https : //americanexpress.io/clean-code-dirty-code/

Answer 5

你需要做兩件事...

1. 在構造函數中將abc()綁定到this或像我一樣使用箭頭函數，否則您將無法訪問this.setState() 。
2. 在生命周期方法中調用該函數，而不是在 React 之外使用ComponentDidMount()調用。

這是更新后的代碼：

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  state = {
    name: ""
  };
  abc = () => {
    console.log("ddd");
    this.setState({
      name: "asd"
    });
  };
  componentDidMount() {
    this.abc();
  }
  render() {
    return <div>ddd {this.state.name}</div>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CodeSandbox 中的演示

Answer 6

因為abc()沒有綁定到 this 並且方法使用 setState 這是這個對象中的一個方法，你有兩種選擇來解決這個問題：

1- this綁定到構造函數中的方法

2- 將您的功能實現為箭頭功能而不是默認功能

對於第一種方法：

class App extends Component {
  constructor(props){
      super(props);
      this.state = {
          name: '',
      }

      this.abc = this.abc.bind(this);
  }
  abc(){
    console.log("ddd");
    this.setState({
      name: "asd"
    });
  };
  componentDidMount() {
    this.abc();
  }
  render() {
    return <div>ddd {this.state.name}</div>;
  }
}

對於第二種方法：

class App extends Component {
  state = {
      name: '',
  }
  abc = () => {
    console.log("ddd");
    this.setState({
      name: "asd"
    });
  };
  componentDidMount() {
    this.abc();
  }
  render() {
    return <div>ddd {this.state.name}</div>;
  }
}