javascript - undefined variable ，在渲染方法 React 的 if/else 内部分配

Question

我有一个简单的组件，它从父级获取 Prop :

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之后。如果我在 if/else 之外复制/粘贴 let title= 56; ，一切正常。对于所有情况下的调试，message 均未定义。 这是为什么？

Answer 1

使用 let 定义的变量具有 block 作用域，因此它们不会存在于 if/else block 之外。您可以在 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 <>{/* ... */}</>;
  }
}