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或组件。

示例：

＆＃13;

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")
);

＆＃13;

<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>

＆＃13;

检查状态不为空，然后rerender反应失败

1 个答案: