将道具传递给模态 - React Native [英] Passing prop to modal - React Native

问题描述

我正在尝试通过道具将所选电影的电影数据传递到我的模态.但我的运气并不好.

我认为这部分代码出错了.刚开始使用 RN，所以我不确定问题是否出在那里.

app.js 的代码

如果能帮助我用 RN 完成我的第一个宠物项目，我们将不胜感激

更新:所以我在我的 setState 中稍微调整了代码，这样我就可以记录正在发生的事情更新代码 APP.JS ->

title 是对 api 的引用我做错了什么...

更新我解决了这个问题

解决方案

从 如何将道具传递给模态

**** 不是 React Native，但在 React 中概念相同 ****

构造函数(道具){超级(道具)this.state = {isModalOpen: 假，modalProduct:未定义，}}//************************************************************************************/使成为() {返回 (<h4>袋子{this.state.isModalOpen &(<模态modalProduct={this.state.modalProduct}closeModal={() =>this.setState({ isModalOpen: false, modalProduct: undefined})删除产品={ ... }/>){bag.products.map((product, index) => (<div key={index}><div>{product.name}</div><div>£{product.price}</div><div><跨度>数量:{product.quantity} </span><button onClick={() =>this.props.incrementQuantity(product, product.quantity += 1)}>+ </按钮><button onClick={() =>this.decrementQuantity(product)}>- </按钮>//<----

))})}//************************************************************************************/decrementQuantity(产品){如果(产品数量=== 1){this.setState({ isModalOpen: true, modalProduct: product })} 别的 {this.props.decrementQuantity(产品)}}

I am trying to pass my movie data of a selected movie to my modal via props. But I am not having much luck.

I think this part of the code is where it goes wrong. Just started out with RN so I am not sure to be exact if the problem lies there.

Code for app.js https://gist.github.com/anonymous/87c732c803a0a22b197740fd7adcbcdf

Code for movieDetail.js https://gist.github.com/anonymous/618ab72e083f20f89f2421eb74fd95f4

Here is a screenshot of my console logs, as you can see is coming back undefined, but I am not sure how to solve the issue

Any help would be much appreciated to help me get my first pet project to done with RN

UPDATE: so I adjusted the code a little in my setState so I can log what is going on UPDATED CODE APP.JS -> https://gist.github.com/anonymous/c69398e408f05cee2ecacd6f02096fa7 UPDATED CODE MOVIEDETAIL.JS -> https://gist.github.com/anonymous/6560364101fdefef6bdca3ecd9d7c7fc

As you can see from the screenshot it is logging 1 movie but I get an error coming from the movieDetail component saying that title is undefined

title is a reference to the api What am I doing wrong ...

UPDATED I solved the issue

解决方案

Copying over my answer from How to pass props to a modal

**** Not React Native but conceptually same in React ****

constructor(props) {

    super(props)


    this.state = {
      isModalOpen: false,
      modalProduct: undefined,
    }
}

//****************************************************************************/

render() {

    return (
        <h4> Bag </h4>
        {this.state.isModalOpen & (
          <Modal 
            modalProduct={this.state.modalProduct}
            closeModal={() => this.setState({ isModalOpen: false, modalProduct: undefined})
            deleteProduct={ ... }
          />
        )

        {bag.products.map((product, index) => (
        <div key={index}>
            <div>{product.name}</div>
            <div>£{product.price}</div>
            <div>
            <span> Quantity:{product.quantity} </span>
            <button onClick={() => this.props.incrementQuantity(product, product.quantity += 1)}> + </button>
            <button onClick={() => this.decrementQuantity(product)}> - </button> // <----
            </div>
        </div>
        ))}
    )
}

//****************************************************************************/

decrementQuantity(product) {

    if(product.quantity === 1) {
        this.setState({ isModalOpen: true, modalProduct: product })
    } else {
        this.props.decrementQuantity(product)
    }
}

这篇关于将道具传递给模态 - React Native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！