将道具传递到React容器组件

Question

I'm new to React. I'm displaying a list of songs and I want to allow the user to add songs to their favourites. I'm using Redux to store the favourited songs. My PlayList component looks like:

import AddSong from '../containers/AddSong'

class Playlist extends Component {

    render(){
        return (
          <div>
            <h1>Playlists</h1>
            <ul className="container">
              {this.state.items.map(item =>
                <li key={item.track.id}>
                    {item.track.name} by {item.track.artists[0].name}
                    <img src={item.track.album.images[0].url} height="150" width="150" />

                    <AddSong title={item.track.name} />

                </li>
              )}
            </ul>
          </div>
        );

    }
    ...
}

So I passing the song name to AddSong with <AddSong title={item.track.name} />

And AddSong looks like:

import React from 'react'
import { connect } from 'react-redux'
import { addSong } from '../actions'

let AddSong = ({ dispatch }) => {
  let input

  console.log('this is ', this);

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault()
          // GET SONG FROM PROPS AND DISPATCH
          //dispatch(addSong(input.value))

        }}
      >
        <input
          ref={node => {
            input = node
          }}
        />
        <button type="submit">
          Add Song
        </button>
      </form>
    </div>
  )
}
AddSong = connect()(AddSong)

export default AddSong

However, this is an object with the property:

{
   a: Connect(props, context)
}

How do I get the song title in AddSong?

EDIT

So this is what I have now, Im passing the song title to AddSong here:

<AddSong song={item.track.name} title={item.track.name} />

I'm passing the song title in as song and title to show what happens.

In AddSong, I have:

const mapStateToProps = (state) => {

    const {song:song} = state; // or whatever the reducer called
    return {song};
};

const mapDispatchToProps = (dispatch) => ({

    addSong: (value) => dispatch(addSong(value)),
});

export default connect(mapStateToProps, mapDispatchToProps)(AddSong);

And at the top of AddSong I'm doing:

let AddSong = ({ dispatch, ...props }) => {
  let input

  console.log('props is ', props);

The console outputs:

props is  Object {song: undefined, title: "Young Blood"}

I've changed the button to:

<button onClick={(value)=>props.addSong(value)}>
  Add Song
</button>

When I click, this gives the error:

Failed prop type: Invalid prop `songs[0].text` of type `object` supplied to `SongList`, expected `string

Answer 1

Try to use this function

const mapStateToProps = function(store) {
  return {
    data: store.data
  };
  }

AddSong = connect(mapStateToProps)(AddSong)

Answer 2

I assume you have the reducer and you want to access the state via props, if this the case you can mapStateToProps eg

 const mapStateToProps = (state) => { const {song:song} = state; // or whatever the reducer called return {song}; }; const mapDispatchToProps = (dispatch) => ({ addSong: (value) => dispatch(addSong(value)), }); export default connect(mapStateToProps, mapDispatchToProps)(AddSong); 

then you can just write this.props.song .