我正在学习反应并在以下行中遇到问题[关闭]答案

【问题标题】：I am learning react and have problem in following line [closed]我正在学习反应并在以下行中遇到问题[关闭]
【发布时间】：2019-12-18 12:31:20
【问题描述】：

我正在学习 react 并陷入以下代码行：

const { 收藏夹 } = this.state

有人可以帮帮我吗？

【问题讨论】：

相当于const favourites = this.state.favourites。阅读解构分配developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
What does { ...obj1, obj2 } do exactly的可能重复

标签： reactjs

【解决方案1】：

这不是 React 特有的，它是一种称为解构的 JavaScript (ES6) 功能：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

【讨论】：

【解决方案2】：

这意味着 const favorites 等于组件状态中收藏夹的值。所以如果状态下favorites的值是22，那么const favorite就等于22。

const { favourites } = this.state

和

一样

const favourites = this.state.favourites

【讨论】：

但在我的情况下 state={filterText:'Hello', favourites:23}。在这种情况下，const favourites 的值是多少？
@Sachin const favourites 的值将是 23

【解决方案3】：

另外，重要的一点是，通过使用 const，您将 state.favorites 属性设置为只读。此外，您可以将其用于任何对象。假设我有一个包含employeeId、lastName、firstName props 等的员工对象。假设我得到一个员工对象数组，我可以使用这个构造来大大简化代码。

render() {  
  const {UserName, EmailAddress, AccountCreated, PasswordChanged, AccountName,
    Locked, Enabled} = this.props.ewdsUser; 

return (       
    <tr>
        <td>{UserName}</td>
        <td>{EmailAddress}</td>
        <td>{AccountCreated}</td>
        <td>{PasswordChanged}</td>          
        <td>{Locked}</td>       
        <td>{Enabled}</td>

这使我不必这样做：

render() {  

return (       
    <tr>
        <td>{this.props.UserName}</td>
        <td>{this.props.EmailAddress}</td>
        <td>{this.props.AccountCreated}</td>
        <td>{this.props.PasswordChanged}</td>           
        <td>{this.props.Locked}</td>        
        <td>{this.props.Enabled}</td>

【讨论】：