Question

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

<DashboardAddInsuranceStep2
  insuranceList={insuranceSearchList}
/>

DashboardAddInsuranceStep2.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来自组件，因此我在道具中声明了它。
当需要排序时，我将其声明为状态。
发生此错误时。
如何避免这种情况？

Answer 1

您正在破坏状态和道具，并为它们赋予相同的名称，相反，您可以将其用作this.state.insuranceList和this.props.insuranceList

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

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

，当您要使用道具时，请使用propsInsuranceList

Answer 2

错误在这里：

const { insuranceList} = this.props;

const {order,insuranceList}= this.state;

您已声明两个具有相同名称（insuranceList）的变量。它们必须是唯一的。

您可以给它们使用不同的名称，或者在渲染中直接将它们分别用作this.props.insuranceList和this.state.insuranceList：

国家和道具的使用

2 个答案: