时间戳

首页 > 解决方案 > 未定义的变量，在渲染方法 React 中的 if/else 内部分配

javascript - 未定义的变量，在渲染方法 React 中的 if/else 内部分配

问题描述

我有一个简单的组件，它从父级获取道具：

render(){
    const {message} = this.props;

    if(message){
        let {title, text} = message;
    } else {

        let title= 56;
        let text= 34;
        console.log('inside')
        console.log(title);
    }

    console.log('outside');
    console.log(lat);

    return( // JSX) // The vars are not used

当我运行它时，它message是未定义的，我在控制台中看到 -inside和54. 紧接着outside和ReferenceError: title is not defined。let title= 56;如果我在 if/else 外部复制/粘贴，一切正常。对于所有情况下的调试message都是未定义的。这是为什么 ？

标签： javascriptreactjs

解决方案

定义的变量let是块范围的，因此它们不会存在于if/else块之外。if您可以在/之前定义它们，然后在else那里为它们分配值。

class App extends React.Component {
  render() {
    const { message } = this.props;
    let title, text;

    if (message) {
      title = message.title;
      text = message.text;
    } else {
      title = 56;
      text = 34;
    }

    return <>{/* ... */}</>;
  }
}

推荐阅读