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

Question

嗨，我正在尝试访问一个常量，该常量在组件DidMount((的块范围内分配了一个值，并在不同的方法中分配它，但我很难实现。我尝试将其保存到状态，但是在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(( 中的常量内容？

Answer 1

请注意

，您收到not defined错误的原因是您尚未初始化组件的state。如果要console.log(this.state)，则值将为 null 。因此，您正在尝试从null访问.something，这将不起作用。

在 React 中，有状态组件必须初始化其状态。初始化状态的一种方法是在构造函数中(检查下面发布的链接(。

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 "构造函数"(。

Answer 2

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访问或使用解构