Question

所以我有一个父组件，这是一个食物清单，食物清单是通过我的api的查询请求来查询我的mongodb数据库。

每个食品项目都保存在一个div组件中，div是一个子组件，每个div内部是另一个子组件，一个删除按钮。当按下删除按钮时，它会从我的mongodb数据库中删除该食物项目。当从数据库中删除项目时，父组件不会自动更新，我必须刷新页面，以便它再次获取提取请求并获取新数据。

如何在数据库中的数据发生变化时自动更新。

对不起的措辞，我不确定如何提出这个问题。谢谢你的帮助。

这是顶级组件，在组件安装时发出提取请求

componentWillMount(){
    console.log('lol')
    fetch('http://localhost:3001/getDiet')
    .then((res)=>{
      return res.json()
    })
    .then((data)=>{
      console.log(data)
      var totalsObject = this.getUserTotal(data.diet)
      this.setState({
        dietArray: data.diet,
        ready:true,
        userTotals:{
          calories: totalsObject.calorie,
          protein: totalsObject.protein,
          carbohydrates: totalsObject.carbohydrates,
          fat: totalsObject.fat,
          sugar: totalsObject.sugar
        }
      })
    })
    .catch((error)=>{
      console.log(error)
    })
  }


  render(){
    return(
      <div className="user-diet-container">



        {this.state.ready ?
          <div className="diet-list-container">
          <h1>Your Diet</h1>
          <div className="user-totals">
            <h2>Diet Totals</h2>
              <ul>
                <li>Calories:{this.state.userTotals.calories}g</li>
                <li>Protein:{this.state.userTotals.protein}g</li>
                <li>Carbohydrates:{this.state.userTotals.carbohydrates}g</li>
                <li>Fat:{this.state.userTotals.fat}g</li>
                <li>Sugar:{this.state.userTotals.sugar}g</li>

              </ul>

          </div>

            {this.state.dietArray.map(function(item,i){
              return(

            <div key ={i}>
              <DietParcel values={item} id={i}/>
            </div>
            )
          },this)}
            </div>

          : <h1>here is your diet</h1>}
      </div>
    )
  }
}

在该组件内部是一个子组件，它被创建x次，具体取决于从原始获取请求返回的食物项数量

    class DietParcel extends Component{
      constructor(props){
        super(props)
        this.state={
          id: "component" + this.props.id,

        }
      }

      something(){
        console.log("lol")
      }
      render(){
        return(
          <div  className="diet-item" ref={this.state.id}>
           {this.props.values.name}<br/>
          Calories:{this.props.values.calorire}<br/>
          Portion: {this.props.values.portion}<br/>
          <h3>Nutritional Information</h3>

          <ul>
            <li>Protein:{this.props.values.nutrition[0].protein}g</li>
            <li>Carbohydrates:{this.props.values.nutrition[1].carbs}g</li>
            <li>Fat:{this.props.values.nutrition[2].fat}g</li>
            <li>Sugar:{this.props.values.nutrition[3].sugar}g</li>

           </ul>
           <DeleteButton onClick={this.something.bind(this)} values={ this.props.values} component={this}/>
        </div>

        )

      }
    }
    export default DietParcel;

最后是删除按钮，它是DietParcel组件的子项，单击它时会从数据库中删除该特定项目。

class DeleteButton extends Component{

  componentDidMount(){
  }
  deleteComponent(){


  }
  deleteItem(){
    myDietApi.removeSingleItem({id:this.props.values._id})
    .then((res)=>{
      console.log(res)
    })
  }

  render(){
    return(
      <button className="DeleteButton" onClick={this.deleteItem.bind(this)}>x</button>
    )
  }
}
export default DeleteButton;

Answer 1

在阅读完您的描述（没有任何代码示例）后，我猜您的应用程序的结构如下：

<FoodList>
  <FoodItem>
    <DeleteButton />
  </FoodItem>
  <FoodItem>
    <DeleteButton />
  </FoodItem>
  <FoodItem>
    <DeleteButton />
  </FoodItem>
</FoodList>

另外，我假设您正在FoodList（state道具中）映射一系列食物，这样您就可以将每个FoodItem与其子项一起渲染。

我的建议是仅在FoodList内保留此数据库提取和食物删除。每当您想要删除食物时，DeleteButton会将食物id，index或您可能拥有的任何标识符FoodItem发送给FoodList，然后将其传播到deleteFood(foodId) { // send request to delete food from your DB ... // remove food with foodId from state const index = this.state.foods.findIndex(food => food.id === foodId) this.state({ foods: [ ...this.state.foods.slice(0, index), // gets every food before ...this.state.foods.slice(index + 1) // gets every food after ] }) }。

话虽如此，我会删除该项目：

SceneBuilder

子组件更改数据库时，反应父组件更新

1 个答案: