ES6 class实例变量如何工作

Question

我有以下代码，它按预期工作：

import React, { Component } from 'react';

let result = null;
class MyData extends Component {
  _getData = () => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        result = items.find(
          item => item.id === 'abcd'
        );
      });
  };

  componentDidMount() {
    this._getData();
  }

  render() {
    return result ? <span>hello</span> : null;
  }
}

当我尝试如下移动 result 作为 class 的实例变量时，它始终在 render() 中保持 null方法。虽然分配工作正常 post fetch:

import React, { Component } from 'react';

class MyData extends Component {
  result = null;
  _getData = () => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        this.result = items.find(
          item => item.id === 'abcd'
        );
      });
  };

  componentDidMount() {
    this._getData();
  }

  render() {
    return this.result ? <span>hello</span> : null;
  }
}

谁能解释一下这里的预期用法是什么。从 ES6 开始，事情发生了怎样的变化。

Answer 1

我认为您缺少的主要是状态。请记住，您正在扩展的这些组件是具有非常特定生命周期的 React 组件类。查看组件生命周期以获取更多信息。这将通过以下重构按预期工作：

import React, { Component } from 'react';

class MyData extends Component {
    constructor() {
        super();
        this.state = {result:  null};
    }

    _getData = () => {
        fetch(url)
        .then(response => response.json())
        .then(data => {
            let resp = data.items.find(
                item => item.id === 'abcd'
            );

            this.setState({ result: resp });
        });
    };

    componentDidMount() {
        this._getData();
    }

    render() {
       return this.state.result ? <span>hello</span> : null;
    }
 }

Answer 2

您看到空值的原因是您发布的代码示例中的状态未更新。组件安装并且 this.result 为空。但是当 _getData 方法被调用并且响应返回时，组件没有被渲染。

您应该将此数据存储在您的状态中，因为 React 依赖状态更改来了解何时应该重新渲染组件。尝试这样的事情：

import React, { Component } from 'react';

class MyData extends Component {
  state = {
    result: null
  }
  _getData = () => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        this.setState({
          result: items.find(
            item => item.id === 'abcd'
          )
        })
      });
  };

  componentDidMount() {
    this._getData();
  }

  render() {
    const { result } = this.state
    return result ? <span>hello</span> : null;
  }
}

您可以在此处了解有关渲染、状态和组件生命周期的更多信息： https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class

编辑： 如果您想尝试新的 React 钩子 api，您可以将您的组件转换为如下所示：

import React, { useEffect, useState } from 'react';

const MyData = ({ ...props }) => {
  const [result, setResult] = useState(null);

  const getData = () => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        const result = items.find(item => item.id === 'abcd');

        setResult(result);
      });
  };

  useEffect(() => {
    getData();
  }, []);

  return result ? <span>hello</span> : null;
}

Answer 3

两个例子都不行，原因是 componentDidMount 生命周期在 render 生命周期 之后触发。

因为您不会在任何阶段导致重新渲染（setState），没有任何东西会导致额外的渲染读取[=的更新值14=].

因此，下一个示例将始终呈现 No Result

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

let result = null;

class App extends Component {
  thisResult = null;
  setResult = () => {
    result = 10;
    this.thisResult = 10;
  };

  componentDidMount() {
    this.setResult();
  }

  render = () => {
    return <div>{result || this.thisResult ? 'Result' : 'No Result'}</div>;
  };
}

ReactDOM.render(<App />, document.getElementById('root'));

ES6 class实例变量如何工作

How does ES6 class instance variable work

javascript

ecmascript-6

reactjs

es6-class