时间戳

首页 > 解决方案 > React：子组件过滤父组件道具

javascript - React：子组件过滤父组件道具

问题描述

我很困惑为什么这不起作用。我可以进行 API 获取，并很好地过滤数据。但是，父组件已经获取了这个数据，所以我需要使用它而不做另一个调用。

父组件：（我想在contacts这个组件的一个子组件中过滤数据集）

class Database extends Component {
        constructor(props){
            super(props);

            this.state = {
                clients: [],
                contacts: []
            }
        }

我将contacts对象数组传递给子组件，如下所示：

<Container className="database">
   {this.state.clients.map(client => (
     <ClientCard
        key={client.id}
        short={client.short}
        client={client.client}
        {...this.state}
      />
    ))}
 </Container>

然后在我的子组件中，我正在过滤contacts数据以在我的子组件中使用，所以我有一个开始状态：

class ClientCard extends Component {
    constructor(props){
        super(props);

        this.state = {
            showHide: false,
            filteredContacts: []
        }

所以我现在想做的是componentDidMount，像这样过滤道具数据：

this.setState({
    filteredContacts: this.props.contacts.filter(contact => this.props.contacts.short === this.props.short)
     });

我没有收到任何错误，但也没有filteredContacts根据需要设置状态。代码中short提到的是存储在数组中的客户端的缩写，作为我用来帮助我过滤的对象属性。

标签： javascriptreactjs

解决方案

您需要使用contact传递给 filter 函数来过滤该数组中的联系人。大概每个contact都有一个short属性，您想将它与short组件的 prop 进行比较。

this.setState({
    filteredContacts: this.props.contacts.filter(contact => contact.short === this.props.short)
});

不应该有一个this.props.contacts.short因为this.props.contacts是一个数组。

推荐阅读