javascript - 检查状态不为空然后重新渲染在 react 中失败

Question

render(){
    const { user } = this.state;
    return(
      {user &&
      <Card className="container">
        <CardTitle
          title="User profile"
        />
        <li>Name: {user.name}</li>
      </Card>
      }
    )
  }

为什么我不能这样做？我安装了 babel 但上面的代码在 && 处抛出错误，我必须检查用户是否存在，因为我在 componentDidMount 上调用了 API，否则 user.name 会出现未定义的错误，但是上面的代码有什么问题？

Answer 1

{...} 在 JSX 部分中用于插入 JavaScript 表达式。在你使用它的地方，你不在 JSX 部分，所以你不需要它。只需删除周围的 { 和 }:

render() {
    const { user } = this.state;
    return (
        user &&                           // *** No `{`
        <Card className="container">
            <CardTitle
              title="User profile"
            />
            <li>Name: {user.name}</li>
        </Card>
    );                                    // *** No `}`
}

要让它工作，重要的是 this.state.user 要么是 null(特别是)，要么是对对象的引用； undefined 不会削减它，render 必须返回 null 或一个组件。

例子:

class Example extends React.Component {
  constructor(...args) {
    let counter = 0;
    super(...args);
    this.state = {user: null};
    let timer = setInterval(_ => {
      this.setState(s => ({
        user: s.user ? null : {name: "Fred"}
      }));
      if (++counter === 7) {
        clearInterval(timer);
      }
    }, 800);
  }
  render() {
    const { user } = this.state;
    return (
      user &&
      <div>Name: {user.name}</div>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>