子项未在父项中删除列表项时重新呈现，但添加到列表项触发重新呈现

Question

我有简单的添加和删除到我的列表示例.. 我做了两个子组件

1. 潜在客户表单组件（将新潜在客户添加到列表中）
2. 潜在客户列表组件（简单地呈现潜在客户列表还具有删除按钮，通过将 ID 传递回父级来触发删除操作）

在 parent 中，the.state.leads 包含所有潜在客户

在 Form Submit .. 它添加到 the.state.leads 和 LEAD LIST CHILD 组件 使用新添加的潜在客户成功重新渲染

但在删除 LEAD LIST 中的列表时，潜在客户列表不会重新呈现

Image ; Dev Tool Debug in the browser -React Console screenshot ..

我的潜在客户列表组件 ..................................................... .......

class LeadList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      leads: this.props.avlList
    };
    this.handelDeleteLead = this.handelDeleteLead.bind(this);
  }

  handelDeleteLead(e) {
    e.preventDefault();
    this.props.DeleteLead(e.target.id);
  }
  render() {
    console.log(this.state.leads);
    return (
      <div>
        <ul>
          {this.state.leads.map(item => (
            <li key={item.id}>
              {item.name} - {item.mobile} -{item.active ? "Active" : "Inactive"}
              -
              <div
                id={item.id}
                onClick={this.handelDeleteLead}
                cursor="pointer"
              >
                X
              </div>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

......

我的 APP.js 父组件 .....................................

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      leads: [{ id: 1, name: "Panindra", mobile: "88842555542", active: true }]
    };
    this.handleAddToLeads = this.handleAddToLeads.bind(this);
    this.handleRemoveLeads = this.handleRemoveLeads.bind(this);
  }

  handleAddToLeads(lead) {
    let newleadsTemp = this.state.leads;
    lead.id = Math.random() * Math.random();

    newleadsTemp.push(lead);
    // assign a name of list to item list
    let newLeads = newleadsTemp;
    this.setState({
      leads: newLeads
    });
  }

  handleRemoveLeads(lead_id) {
    console.log(" Leads list before fitler ..." + this.state.leads);

    let newFitleredLeads = remove(this.state.leads, lead_id);
    this.setState({
      leads: newFitleredLeads
    });
    console.log(" Leads list after fitler ..." + this.state.leads);
  }

  render() {
    return (
      <div className="App">
        <h1> My First Redux</h1>
        <hr />

        <div className="leadList">
          <LeadList
            avlList={this.state.leads}
            DeleteLead={this.handleRemoveLeads}
          />
        </div>
        <div className="leadForm">
          <LeadForm NewLead={this.handleAddToLeads} />
        </div>
      </div>
    );
  }
}

.....

Answer 1

我认为问题在于您在 LeadList 组件中使用了状态。尝试从 LeadList 组件中删除状态。您不需要管理多个状态（这很重要）。

class LeadList extends React.Component {
  render() {
    return (
      <div>
        <ul>
          {this.props.avlList.map(item => (
            <li key={item.id}>
              {item.name} - {item.mobile} -{item.active ? "Active" : "Inactive"}
              -
              <div
                id={item.id}
                onClick={() => this.props.DeleteLead(item.id)}
                cursor="pointer"
              >
                X
              </div>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

并修复父（App）组件中的handleRemoveLeads函数。

handleRemoveLeads(lead_id) {
    console.log(" Leads list before fitler ..." + this.state.leads);

    // THIS IS NOT WORKING
    //let newFitleredLeads = remove(this.state.leads, lead_id);

    // BETTER SOLUTION
    let newFitleredLeads = this.state.leads.filter(item => item.id !== lead_id);

    this.setState({
      leads: newFitleredLeads
    });
    console.log(" Leads list after fitler ..." + this.state.leads);   
}

这应该可以正常工作。 工作示例（无表单）：https://codesandbox.io/s/charming-kowalevski-rj5nj