在反应组件中解构和使用道具

Question

说我将 total_counts 从父组件传递给子组件。

在我的子组件中，我有一个渲染方法

render() {
    console.log(this.props.pagination.total_counts )
}

如何正确使用 total_counts 而不会出错？我的孩子渲染方法可能会渲染多次，因为分页是通过 http 调用来的。如果我像下面那样进行解构

const { total_counts } = this.props.pagination
render(){
   return (
      <div>{total_counts && <p>{total_counts.toString()}</p>}</div>
   )
}

我还是要检查 total_counts 是不是 undefined

Answer 1

如果你是从this.props.pagination访问total_counts，那么解构语句应该是这样的：

const { total_counts } = this.props.pagination;

这假设分页永远不会未定义。否则，我建议您先检查它，如果它不存在，则回退到某个值；

// default value if this.props.pagination is undefined
let total_counts = 0;

// if this.props.pagination and total_counts property in it exist
// then assign total_counts variable
if (this.props.pagination && this.props.pagination.total_counts) {
  total_counts = this.props.pagination.total_counts;
}