javascript - 当子组件更改数据库时响应父组件更新

Question

所以我有一个父组件，它是一个食物列表，该食物列表是通过对我的 api 查询我的 mongodb 数据库的获取请求来接收的。

每个食物项都保存在作为子组件的 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 与它的 child 一起。

我的建议是仅将数据库获取和食物删除保留在FoodList内。每当您想要删除食物时，DeleteButton 都会向 FoodItem 发送食物 id、index 或任何您可能需要的标识符因此将其传播到 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
    ]
  })
}