更新值后返回子组件答案

【问题标题】：Returning back to the child component after updating a value更新值后返回子组件
【发布时间】：2020-07-08 03:14:53
【问题描述】：

在我的 REACT 应用程序中，我有一个名为 Main.js，它调用了一个名为 Listings 的组件。 Listings 组件从 Main 获取一个状态，该状态具有我们将在屏幕上显示的项目列表。然后，Listings 组件称为 ListItem 组件。

Main.js 是一个类组件

class Main extends Component {

 state = {
    Listings: {
    }
  }

componentDidMount() {
// make backend calls to get Listings. 
// each listing has multiple attributes such as name, location, likes and dislikes. 

handleLikeDisLike(ListingId){
// this function receives a ListingId and updates the number of Likes and DisLikes. 
}

return (
    <Listings props={this.state}
)

export default Main;

在 Listings 组件中，我遍历每个列表并使用 Main 组件中的 props 调用 ListItem 组件

        let transformedListings = this.props.Listings.map(listing => {
            return <ListItem
                Listing_Location={listing.Listing_Location}
                Listing_Likes={listing.Listing_Likes}
                Listing_DisLikes={listing.Listing_DisLikes}
                Listing_Name={listing.Listing_Name}
                Listing_Description={listing.Listing_Description}
                Listing_Id={listing.Listing_Id}
                key={listing.Listing_Id}
                handleLikeDisLike={this.props.handleLikeDisLike}
            />
        });

列表项组件

return (
<div>
     <Modal show={props.show} onHide={props.handleClose}>
        <Modal.Body>
          <h4>{props.Listing_Name} </h4>
          <Button className="Button" variant="outline-info" ><Twemoji text=":pushpin:" /></Button>
          <Badge className="Badge" variant="light">{props.Listing_Location}</Badge>
          <Button className="Button" variant="outline-success" onClick={() => props.handleLikeDisLike(props.Listing_Id, 'Listing_Likes', props.Listing_Location)}> <Twemoji text=":+1:" /></Button> 
          <Badge className="Badge" variant="light">{props.Listing_Likes}</Badge>
          <Button className="Button" variant="outline-danger" onClick={() => props.handleLikeDisLike(props.Listing_Id, 'Listing_DisLikes', props.Listing_Location)}><Twemoji text=":-1:" /></Button>
          <Badge className="Badge" variant="light">{props.Listing_DisLikes}</Badge>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={props.handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={props.handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
</div>
)

现在在我的组件 ListItem 中，我有一个模式窗口，可以让用户喜欢/不喜欢。当用户点击喜欢和不喜欢时，模式窗口关闭并呈现列表。我希望能够在模态中保留控制权。请有人帮助我了解解决/设计我的应用程序以保留对子组件的控制权的最佳方法。

【问题讨论】：

I want to be able to retain control in the Modal 是什么意思？
@davidhu 我尝试喜欢/不喜欢然后模式关闭并在重新加载时将控制传递回父组件。

标签： javascript reactjs react-redux react-router

【解决方案1】：

创建本地状态

在ListItem 中使用道具副本创建状态 - 项目属性。

喜欢：

state = {
  listItem: props.item
}

并处理ListItem 组件上的喜欢和不喜欢的变化。

在Save Changes 上，您可以调用handleLikeDisLike 函数

【讨论】：

让我试一试，看看效果如何