Question

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

我有3个组件。 Main，Food and FoodList。

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

＆＃13;

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

＆＃13;

食物成分 - 映射收到的食物道具，并将其传递给FoodList Component以呈现为lis

＆＃13;

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

＆＃13;

FoodList组件 - 接收映射的道具并呈现为li

＆＃13;

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

＆＃13;

Answer 1

将其添加到您的主要组件

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>

Answer 2

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

例如

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} />

最后在您的食物清单组件中使用它

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

使用子组件中的funciton更改父级的状态

2 个答案: