Question

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

 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;

<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>

第二个-子组件：

import React, {
  Component
} from 'react';
import classes from './Modal.css';

class Modal extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      book: "",
      show: ""
    }
  }

  componentWillReceiveProps(props) {
    const {
      book,
      show
    }: this.props;
    if (book !== props.book || show !== props.show) {
      this.setState({
        book: props.book,
        show: 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>
  );
}
}

PS：您还可以将componentWillReceiveProps（props）事件用于父组件。

Answer 2

constructor仅运行一次。适用于计算初始状态。但这是getDerivedStateFromProps钩子的作用。每次更新组件（包括初始化）时，它都可以根据props计算状态：

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

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

2 个答案: