使用子组件中的函数更改父状态

Question

如何使用 setState [child to parent] 重新渲染数据？ FoodList 中的 deleteItem 函数应删除所选数据并重新渲染。我不是要求删除代码，而是我将如何重新渲染在子组件中具有函数的主组件，该子组件应该 deleteItem 进行重新渲染

我有 3 个组件。 Main、Food 和 FoodList。

主组件 - 通过状态保存数组中的食物列表并将其作为道具传递给食物组件。

class Main extends Component{
    constructor(){
        super();
        this.state = {
            foods: []
        };
    }
    
    componentWillMount(){
        this.setState({
            foods: [
                {
                    id: uui.v4(),
                    name: "Chocolate Cake",
                    category: "dessert"
                },
                {
                    id: uui.v4(),
                    name: "Milkshake",
                    category: "beverage"
                }
            ]
        });
    }
    
    render(){
        return(<Food lists={this.state.foods}/>);
    }
}

食物组件 - 映射接收到的食物列表道具并将其传递给 FoodList 组件以呈现为 lis

class Food extends Component{
    render(){
        let items;
        //check if object has value;
        if(this.props.lists)
        {
            items = this.props.lists.map(food => {
                //pass each food as props
                return <FoodList key={food.id} food_list={food} />;
            });
        }
        
        return(
            <div>
            <h3>Available Foods</h3>
            {items}
            </div>
        );	
    }
}

FoodList 组件 - 接收映射的道具并渲染为 li

class FoodList extends Component {
    
    deleteItem(id)
    {
        console.log(id);
        //delete item using passed id and re rende food state in Main Component
    }
    
    render(){
        return <li>{this.props.food_list.name} - {this.props.food_list.category}
        <a href="#" onClick={this.deleteItem.bind(this, this.props.food_list.id)}>Delete</a>
        </li>
    }
}

Answer 1

我认为您可以在父组件上创建一个方法并将其作为道具传递给子组件

例子

class Main extends Component{
    constructor(){
        super();
        this.state = {
          foods: []
        };
    }

    deleteFood = (id) => {
      let foods = this.state.foods;
      let index = -1;
      for(let i = 0; i < foods.length; i++){
        if(foods[i].id == id){
          index = i;
          break;
        }
      }
      if(index == -1){
        return;
      }
      foods.splice(index, 1);
      this.setState({foods: foods});
    }

    componentWillMount(){
        this.setState({
            foods: [
            {
                id: uui.v4(),
                name: "Chocolate Cake",
                category: "dessert"
            },
            {
                id: uui.v4(),
                name: "Milkshake",
                category: "beverage"
            }
            ]
        });
    }

    render(){
        return(<Food deleteFood={this.deleteFood} lists={this.state.foods}/>);
    }
}

对在你的 Food 组件中渲染 FoodList 做同样的事情

<FoodList key={food.id} food_list={food} deleteFood={this.props.deleteFood} />

最后在你的 foodlist 组件中使用它

deleteItem(id)
    {
        console.log(id);
        this.props.deleteFood(id);
        //delete item using passed id and re rende food state in Main Component
    }

Answer 2

将此添加到您的主要组件

deleteItem(id) {
  this.setState({
    foods: this.state.data.filter(food => food.id !== id)
  })
}

通过你的组件传递它

<Food lists={this.state.foods} deleteItem={this.deleteItem.bind(this)}/>

-

items = this.props.lists.map((food, index) => {
  return <FoodList key={food.id} food_list={food} deleteItem={this.props.deleteItem}/>;
});

点击删除按钮调用它

deleteItem(id) {
  this.props.deleteItem(id);
}

<a href="#" onClick={this.deleteItem.bind(this, id)}>Delete</a>