Javascript 为什么状态值没有反映在ReactJS中？

此.state.name未反映。

我正在从外部调用此函数

---

我想从外部调用组件函数并更新状态。

这不是编写React代码的方式。你应该这样做：

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

子组件

---

看看这里的一个实例：

我建议您在类内调用类方法，但如果您想解决问题，请在index.js上使用React.createRef：

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;

这个怎么样

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();

---

您调用函数的方式不正确。 记住：需要调用函数。。。 对于第二个问题：不能将函数从子函数调用到父函数。 在这种情况下，您应该在父级中创建一个函数，发送给子级，然后在事件组件加载时调用它，单击，等等。。。 如果您确实需要这样做：将数据、函数等从子级发送到父级。。。检查Redux：

下面是您的代码，在函数abc上做了一些小改动：

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

请注意使用“；”在每一行的末尾，不是正确的写React js的方法。

---

最佳实践链接：

您需要做两件事

将abc绑定到构造函数中，或者像我这样使用箭头函数，否则您将无法访问this.setState。 在lifecycle方法中调用函数，而不是使用ComponentDidMount在外部进行响应。 以下是更新的代码：

从React导入React，{Component}； 从react-dom导入ReactDOM； 类应用程序扩展组件{ 状态={ 姓名： }; abc==>{ console.logddd； 这是我的国家{ 姓名:asd }; }; 组件安装{ 这是abc； } 渲染{ 返回ddd{this.state.name}； } } const rootElement=document.getElementByIdroot； ReactDOM.render

由于abc不受此方法的限制，并且使用此对象中的方法setState，因此有两种选择来解决此问题：

1-将此绑定到构造函数中的方法

2-将函数实现为箭头函数，而不是默认函数

对于第一种方法：

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

对于第二种方法：

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

---

也许可以尝试类似的方法，但您可能应该重构代码，通过props传递该值，并在componentDidMount上调用组件内部的函数。如果在安装组件之前调用此函数，则会出现错误。关于“从外部调用”的问题，您不能，只能从父级调用函数。在React js中，不能将子函数调用到父函数中。为此，你需要重做

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

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

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