將 props 傳遞給另一個文件 redux 中的組件

Question

我需要使用 redux 將 props 傳遞給位於另一個文件中的組件。 將它作為道具傳遞給組件不起作用。 任何幫助將不勝感激，剛開始學習 Redux！

標題

 export class DisconnectedAllDogs extends React.Component { render() { return ( <div> <div className='all-dogs'> <h1>Peter's Park</h1> </div> <div> { this.props.dogs.map(dog => { return <DogCard dog = {dog}/> })} </div> </div> ) } } export const mapStateToProps = (state) => { return { dogs: state.dogs } } export const mapDispatchToProps = (dispatch) => { return { } } export default connect(mapStateToProps, mapDispatchToProps)(DisconnectedAllDogs)

 const DogCard = () => { return ( <div class='dog-card'> <Link key={ this.props.dog.id }>{ this.props.dog.name }</Link> </div> ) } export default DogCard

Answer 1

我認為第二個組件（DogCard）的變體如下有望解決您可能面臨的問題。

const DogCard = (props) => {
      return (
        <div class='dog-card'>
          <Link key={ props.dog.id }>{ props.dog.name }</Link>
        </div>
      )
    }


    export default DogCard

關於另一個組件，我認為你在那里做得很棒。 但如果您遇到問題，請隨意添加一個構造函數：

export class DisconnectedAllDogs extends React.Component {
  constructor(props){
   super(props);
   this.state = null;
  }
  render() {
    return (
      <div>
        <div className='all-dogs'>
          <h1>Peter's Park</h1>
        </div>
        <div>
          { this.props.dogs.map(dog => {
            return <DogCard  dog = {dog}/>
          })}
        </div>
      </div>
    )
  }
}

export const mapStateToProps = (state) => {
  return {
    dogs: state.dogs
  }
}

export const mapDispatchToProps = (dispatch) => {
  return {

  }
}

export default connect(mapStateToProps, mapDispatchToProps)(DisconnectedAllDogs)

真的希望它有幫助......