Question

我有一个应该包含-play-lists的组件。显示我的硬编码列表（初始状态）（单击时作为按钮，它将映射的数组显示为带有艺术家和专辑的歌曲列表）

export default class PlayList extends React.Component{
  constructor() {
      super()

      this.state = {
        clicked: false
      }
      this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
      this.setState({
        clicked: !this.state.clicked
      })
      console.log(this.props.selectList.name)

    }


render(){
  console.log(this.props);
// console.log(this.props.playLists[0].data);
  return (<div>
    <button  onClick={this.handleClick}><h1>{this.props.playLists[0].title}</h1></button>
{this.state.clicked ?
  <ul>
      { this.props.playLists[0].data.map(song =>
        <li key={song.id} onClick={() => this.props.selectSong(song.id)}>
          <b>{song.title}</b><br/>
            By:
            <br/>
            <h3><b>{song.artist}</b></h3><br/>
             Appears on:
              <b>{song.album}</b><br/><br/>
        </li>
      ) }
      <AddSongFormContainer/>
    </ul>


     : null}


  </div>)
  }
}

-master-list（应该包含所有列表）下方有一个按钮|新列表+ |单击时显示输入（窗体）您可以在其中输入新播放列表的名称。

export default class AddListForm extends React.PureComponent {
  constructor() {
      super();

      this.state = {
        clicked: false
      };

      this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
      this.setState({
        clicked: !this.state.clicked
      })
    }

  handleChange = (event) => {
    const value = event.target.value
    const name = event.target.name
// console.log(value);
    this.setState({
      [name]: value
    })
  }

  handleSubmit = (event) => {
    event.preventDefault()

    if (this.state.title) {
      this.props.addList({
        title: this.state.title
      })
    }

  }

  render() {
    return (<div>
      <button onClick={this.handleClick}><h2>New List+</h2></button>

  {this.state.clicked ?
     <form onSubmit={this.handleSubmit}>
        <label>
          Playlist Title:
          <input type="text" name="title" onChange={this.handleChange} />
        </label>


        <input type="submit" value="Submit" />
      </form>
      : null}
    </div>)
  }

}

点击提交，它会派发一个动作ADD_LIST 它显示在我的（ Redux ）状态（它显示了我的 硬编码列表

0（pin）{id：number，title：“ string”，data [id（pin）：1 标题（图钉）：“歌曲名称” 艺术家（图钉）：“艺术家名称” album（pin）：“专辑名称”]}

我的新列表 1（pin）{id：number，title：“ string”，data []}

播放列表精简器

const initState = [

  { id:1,
    title:'Play list 1',
    data:[
    {
        id: 1,
        title: 'DogHeart II',
        artist: 'The Growlers',
        album: 'Gilded Pleasures'
      },
      {
        id: 2,
        title: 'Beast of No nation',
        artist: 'Fela Kuti',
        album: 'Finding Fela'
      },
      {
        id: 3,
        title: 'Satellite of love',
        artist: 'Lou Reed',
        album: 'Transformer'
      }
    ]
  }
]
const reducer = (state = initState, action = {}) => {
  switch (action.type) {
    case 'ADD_SONG':
      return [...state,
        action.payload]
        case 'ADD_LIST':
          return [
            ...state,
            action.payload
          ]
  default:
    return state
  }
}

export default reducer

我不确定为什么不显示新列表或者我在动摇的逻辑中所缺少的..

将列表添加到播放列表React-Redux

0 个答案: