更改状态时不会调用Cardlist组件

Question

我是反应js的新手，我的代码有问题。 我有一个Cardlist组件，当我将其联系人列表传递给它时，它会返回我的联系人列表布局。 我添加了一个搜索框来搜索特定的联系人。 该列表在搜索框中输入一些文本后进行了更新（我在控制台中将其注销，并且工作正常）。 更改搜索文本后，render和return方法也可以很好地工作（即，在更改状态后每次都会调用它们，我将其注销），但是Cardlist组件没有再次被调用。 它仍然显示相同的旧列表。 这个Cardlist组件内的console.log也未记录任何内容，这仅意味着不会再次调用它。

这是主要组成部分（未显示完整代码，仅显示必要部分）：

constructor(props){
        super(props);
        this.state = {
            friendslist: this.props.data.friendslist,
            searchfield:''
        }
    }

onSearchChange = (event) => {
        this.setState({ searchfield: event.target.value });
    }

render(){

        var filterfriendslist = this.state.friendslist.filter(friendslistitem => {
        return friendslistitem.name.toLowerCase().includes(this.state.searchfield.toLowerCase())
        });

        {console.log( filterfriendslist )}

    return(
<div>
<input id="name" onChange={this.onSearchChange} className="input-reset ba b--black-20 pa2 mv2 db w-100 bg-near-white" type="text" placeholder='Search' />

                <Scroll>
                    <div>
                        {console.log( filterfriendslist )}
                        <Cardlist friendlist={ filterfriendslist } loadChattingUser={ this.loadChattingUser } />
                    </div>
                </Scroll>
            </div>
);
    }
}

export default Contacts;

这是Carlist组件：

import React from 'react';
import Card from './Card';

class Cardlist extends React.Component {

    constructor(props){
        super(props);
        console.log("Clicked");
    }

    cardComponent = this.props.friendlist.map((user, i) => {
        return <Card key={i} id={this.props.friendlist[i].id} name = {this.props.friendlist[i].name} imageURL={this.props.friendlist[i].imageurl} email={this.props.friendlist[i].email} msgDatabase={ this.props.friendlist[i].msgdata } loadChattingUser={ this.props.loadChattingUser } />
    })

render(){
    return (
        <div>
            {this.cardComponent}
        </div>  
    );
}
}

export default Cardlist;

这是卡组件：

import React from 'react';

class Card extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            name: this.props.name,
            imageURL: this.props.imageURL,
            email: this.props.email,
            msgDatabase: this.props.msgDatabase
        }
    }

    fillChat = () => {
        this.props.loadChattingUser(this.state);
    }

render(){
    return (
        <div className="dt w-100 bb b--black-05 pb2 mt2 pa2 bg-near-white pointer" onClick={ this.fillChat }>
          <div className="dtc w2 w3-ns v-mid">
            <img alt="Profile" src={this.props.imageURL} className="ba b--black-10 db br-100 w2 w3-ns h2 h3-ns"/>
          </div>
          <div className="dtc v-mid pl3">
            <h1 className="f6 f5-ns fw6 lh-title black mv0">{this.props.name}</h1>
            <h2 className="f6 fw4 mt0 mb0 black-60">{this.props.email}</h2>
          </div>
          <div className="dtc v-mid">
            <form className="w-100 tr">
              <button className="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
            </form>
          </div>
        </div>
        );
    }
}


export default Card;

我希望Cardlist布局根据搜索中的输入进行更改，但仍与初始列表相同

Answer 1

有关您实施Cardlist 。 在您的实现中， cardComponent字段是预先计算的字段。 应该是这样的：

class Cardlist extends React.Component {
  constructor(props) {
    super(props);
    console.log("Clicked");
  }

  render() {
    const cardComponent = this.props.friendlist.map((user, i) => {
      return (
        <Card
          key={i}
          id={this.props.friendlist[i].id}
          name={this.props.friendlist[i].name}
          imageURL={this.props.friendlist[i].imageurl}
          email={this.props.friendlist[i].email}
          msgDatabase={this.props.friendlist[i].msgdata}
          loadChattingUser={this.props.loadChattingUser}
        />
      );
    });

    return <div>{cardComponent}</div>;
  }
}

这是codesandbox链接： https ://codesandbox.io/s/chatter-zdljq