时间戳

首页 > 解决方案 > 状态和道具的使用

reactjs - 状态和道具的使用

问题描述

我想用 对我的表进行排序insuranceList。它像这样从组件传递

<DashboardAddInsuranceStep2
  insuranceList={insuranceSearchList}
/>

仪表板AddInsuranceStep2.js

        this.state:{
insuranceList: props.insuranceList
}
sort(event) {
        const {order} =this.state;
        let {insuranceList} = this.props;
        order[event.target.id]=! order[event.target.id];
        insuranceList= _.orderBy(insuranceList, (o)=> typeof o[event.target.id] === 'string' ? o[event.target.id].trim().toLowerCase() : o[event.target.id], order[event.target.id] ? 'asc' : 'desc');
        this.setState({
            orderby: event.target.id,
            insuranceList: insuranceList,
            order
        });
    }

render(){
const { insuranceList} = this.props;

const {order,insuranceList}= this.state;

<tr>
 <th id='Adjuster' onClick={this.sort}>Adjuster{order.Adjuster?<i className="fa fa-sort-asc"/> : <i className="fa fa-sort-desc"/>}</th>
</tr>
}

由于insuranceList来自组件，我在道具中声明了它。
当需要排序时，我将其声明为状态。
执行此错误时发生。
如何避免这种情况？

标签： reactjs

解决方案

您正在解构状态和道具，并为两者赋予相同的名称，相反，您可以使用 asthis.state.insuranceList和this.props.insuranceList

或者您可以在解构时更改常量的名称，例如

const { insuranceList: propsInsuranceList } = this.props;
const { insuranceList } = this.state;

当你使用它们propsInsuranceList时，当你想从道具中引用它们时

推荐阅读