javascript - 理解 If 条件逻辑

Question

所以我的 react 有状态组件中有类似的东西(我正在遵循一些 react 教程)

class FullPost extends Component {
  state = {
    loadedpost: null
  }
  componentDidUpdate () {
    if (this.props.id) {
      if (!this.state.loadedpost || this.state.loadedpost && this.state.loadedpost.id !== this.props.id) {
        axios.get("https://jsonplaceholder.typicode.com/posts/" + this.props.id).then(response => {
            this.setState({loadedpost: response.data})
          })
        }
    }
  }

在上面的代码中，看这一行

 if (!this.state.loadedpost || this.state.loadedpost && this.state.loadedpost.id !== this.props.id) 

这里我们说的是如果 this.state.loadedpost 为真甚至为假时要执行的代码？所以我认为这个检查是不必要的，因此将其删除。这使得我的代码像这样

if ( this.state.loadedpost.id !== this.props.id) {

但这会抛出一个错误，提示 this.state.loadedpost.id (实际上错误是 Cannot read property 'id' of null)。我明白了，因为我们在 this.state.loadedpost.id 中还没有任何内容(在我们的第一个请求中)

[问题]但是，为什么当我们使用第一个提到的代码时没有出现同样的错误呢？即

  if (!this.state.loadedpost || this.state.loadedpost && this.state.loadedpost.id !== this.props.id) 

Answer 1

why isn't the same error not coming when we use the first mentioned code?

因为||短路。当它看到 this.state.loadedpost是假的，它立即将该假值作为结果，并且根本不评估右侧。所以this.state.loadedpost.id未评估(因此不会导致错误)。

您的版本:

if ( this.state.loadedpost.id !== this.props.id) {

总是尝试阅读id来自this.state.loadedpost ，如果 this.state.loadedpost 将会失败是 undefined , null等

<小时/>

该语句可以被缩短，没有理由使用 this.state.loadedpost &&部分:

if (!this.state.loadedpost || this.state.loadedpost.id !== this.props.id)