将道具传递给模态 - React Native

时间:2018-01-17 00:37:58

标签: react-native

我试图通过道具将我选择的电影的电影数据传递给我的模态。但我没有太多运气。

我认为代码的这一部分是出错的地方。刚刚开始使用RN,所以如果问题存在,我不确定是否确切。 enter image description here

app.js的代码 https://gist.github.com/anonymous/87c732c803a0a22b197740fd7adcbcdf

movieDetail.js的代码 https://gist.github.com/anonymous/618ab72e083f20f89f2421eb74fd95f4

以下是我的控制台日志的屏幕截图,正如您所看到的那样未定义,但我不知道如何解决问题 enter image description here

非常感谢任何帮助,以帮助我完成第一个与RN完成的宠物项目

更新: 所以我在我的setState中稍微调整了一下代码,这样我就可以记录发生了什么 enter image description here 更新代码APP.JS - > https://gist.github.com/anonymous/c69398e408f05cee2ecacd6f02096fa7 更新后的代码MOVIEDETAIL.JS - > https://gist.github.com/anonymous/6560364101fdefef6bdca3ecd9d7c7fc

正如您从屏幕截图中看到的那样,它正在记录1部电影,但我收到来自movieDetail组件的错误,说明标题未定义 enter image description here

title是对api的引用 enter image description here 我做错了什么......

已更新 我解决了这个问题

1 个答案:

答案 0 :(得分:0)

How to pass props to a modal复制我的答案

****不是React Native,但在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)
    }
}