转发状态与将道具转发到子组件

Question

我无法将状态从父组件转发到子组件，这两个组件是类组件。将状态从父组件转发到子组件时，我希望在子组件中使用状态showModal变量作为状态变量show as：

 this.state = {
     show: this.props.show
 }

这个变量被用来激活模态。当我将其用作this.props.show时，状态已被转发到子组件并进行更新，但当我在子组件中this.state中使用道具时，状态尚未更新。有人知道问题出在哪里吗？

第一父组件：

    import React, { Component } from 'react';
    import Modal from './UI/Modal';

    class EnteredBooks extends Component {
        constructor(props) {
            super(props)

            this.state = {
                enteredBook: this.props.enteredBook,
                showModal: false
            }
        }

        detailsHandler = () => {
            this.setState({
                showModal: true
            })
        }

        render() {
            let show =  this.state.showModal;
            return (
                <div>
                     <div className="product">
                         <img src="{this.props.enteredWatch.bookUrl}" />
                         <p>{this.props.enteredWatch.bookType}</p>
                         <p>euro{this.props.enteredWatch.bookPrice}</p>
                         <button 
                             className="details-button"
                             onClick={this.detailsHandler}
                                >
                                    Details
                         </button>
                         <Modal show={this.state.showModal} watch={this.state.enteredWatch} />
                         <button className="buy-button">Buy</button>
                      </div>
                </div>
            );
        }
    }

export default EnteredWatches;

第二子组件：

import React, {Component} from 'react';
import classes from './Modal.css';

class Modal extends React.Component {
constructor(props) {
    super(props)

        this.state = {
            book: this.props.book,
            show: this.props.show
        }
    }
return(
        <div>
             <div className="Modal"
                    style={{
                        transform: this.state.show ? 'translateY(0)' : 'translateY(-100vh)',
                        opacity: this.state.show ? '1':'0'
                    }}>

                    <img src={this.state.book.bookUrl} />
                    <p>{this.state.book.bookType}</p>
                    <p>{this.state.book.watchUrl}</p>
                    <button className="details-button">Details</button>
                    <button className="buy-button">Buy</b
                </div>
            </div>
        );
    }
}


export default Modal;

Answer 1

我编辑了你代码的某些部分。我不确定你是否在问这个问题，但希望它能启发你解决问题。

第一父组件：

import React, {
  Component
} from 'react';
import Modal from './UI/Modal';

class EnteredBooks extends Component {
  constructor(props) {
    super(props)

    this.state = {
      enteredBook:"",
      showModal: false
    }
  }

  detailsHandler = () => {
    this.setState({
      showModal: true
      enteredBook: this.props.enteredBook
    })
  }

  render() {
    let show = this.state.showModal;
    return ( <
      div >
      <
      div className = "product" >
      <
      img src = "{this.props.enteredWatch.bookUrl}" / >
      <
      p > {
        this.props.enteredWatch.bookType
      } < /p> <
      p > euro {
        this.props.enteredWatch.bookPrice
      } < /p> <
      button className = "details-button"
      onClick = {
        this.detailsHandler
      } >
      Details <
      /button> <
      Modal show = {
        this.state.showModal
      }
      watch = {
        this.state.enteredWatch
      }
      /> <
      button className = "buy-button" > Buy < /button> <
      /div> <
      /div>
    );
  }
}

export default EnteredWatches;

html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

constructor只运行一次。它适用于计算初始状态。但是这个例子就是getDerivedStateFromPropshook的用途。它允许在每次更新组件时从props计算状态，包括初始化：

static getDerivedStateFromProps(props) {
  return {
        book: props.book,
        show: props.show
  };
}