Question

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

潜在客户表单组件（将新潜在客户添加到列表中）
领导列表组件（仅显示“领导列表”也具有删除按钮，该按钮通过将ID返回给父对象来触发删除操作）

在parent中，.state.leads包含所有线索

在“表单提交..”中添加到.state.leads和LEAD LIST CHILD组件中使用新添加的潜在客户成功重新渲染

但在删除“主列表”中的列表时，主列表不会重新呈现

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

MY LeadList组件 ................................................... .......

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>
    );
  }
}

并修复父级（应用程序）组件中的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

子项不会在父项中删除列表项时重新呈现，而是添加到触发重新呈现的列表项中

1 个答案: