在块范围之外反应访问常量

Question

您好，我正在尝试访问一个 const，它在 componentDidMount() 的块范围内分配了一个值，并在不同的方法中分配它，但我很难实现。我尝试将其保存到状态，但是 'something' 未在 renderTable()

中定义

我的代码如下：

// Pseudo code:
class tableView extends Component {

  componentDidMount() {
    .......
      const something = 'blah';
      this.setState({something});
  }
  renderTable() {
    const tableData = [
      {
        name: 'Item 1',
        data: this.state.something,
      },

    ];

    return {
        ......
    };
  }

是否有任何其他方法允许我访问 renderTable() 中的 something const？

Answer 1

state = {
tableData : [
      {
        name: 'Item 1',
        data: this.state.something,
      },

    ],
 something:'this is something on mount it will change to blah',

}


 componentDidMount() {
.......
  const something = 'blah';
  this.setState({something});
}

  renderTable() {
   const {tableData} = this.state;

    return {
        ......
    };
  }

使用 this.state.tableData 访问或使用解构。

Answer 2

请注意，您收到 not defined 错误的原因是您尚未初始化组件的 state。如果您要 console.log(this.state)，则该值为 null。所以你试图从 null 中访问 .something，这是行不通的。

在 React 中，有状态组件必须对其状态进行初始化。初始化状态的一种方法是在构造函数中（检查下面发布的 link）。

class App extends React.Component {
    // THIS IS WHAT YOU ARE MISSING!
    constructor() {
        super()
        this.state = {
          something: '',
        }
    }
    // END

    componentDidMount() {
        const something = 'blah';
        this.setState({ something });
    }

    renderTable() {
        const tableData = [
          {
            name: 'Item 1',
            data: this.state.something,
          },
        ];

        return ...
  }

  ...
}

阅读 https://reactjs.org/docs/state-and-lifecycle.html (Ctrl+F 'constructor') 了解更多信息。

在块范围之外反应访问常量

React access const outside of block scope

scope

constants

block

reactjs