Question

我在父组件（app.js）中编写了一个句柄点击功能，并将其作为道具传递给子组件（video_list.js）。使用子组件和onClick函数中的数据，它将使用通过api获取的一些信息更新父状态。

最初，我得到了“无法读取属性'道具'的'null'错误，并遵循了这篇文章中的指南 - ＆gt; Cannot read property 'props' of null - Reactjs。我有控制台。记录了video_list收到的道具，确实获得了“handlePick”功能。但是，在测试时，它会抛出一个错误，说“TypeError：无法读取未定义的属性'handlePick'”。我已经尝试了上述帖子中提出的所有内容，但仍然会遇到同样的错误。

注意：通过使用video_list中的信息更新app.js上的状态，它将生成“video_modal.js”以及更多详细信息。

... app.js

import React, { Component } from 'react';

// MODULES

// COMPONENTS
import VideoList from './components/video_list/video_list';
import Dashboard from './components/dashboard/dashboard';
import Navbar from './components/navbar/navbar';
import SearchBar from './components/search_bar/search_bar';
import VideoModal from './components/video_detail/video_modal';

// REDUX
import { connect } from 'react-redux';
// import reducer from './reducers/reducer';

// CSS/Other Resources
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movieSelected: undefined,
    };

    // this.handlePick = this.handlePick.bind(this);
  }

  handleCloseDetail = () => {
    this.setState({ movieSelected: undefined });
  };

  handlePick = () => {
    this.setState({ movieSelected: this.movieData.imdbID });
  };

  // RENDER
  render() {
    return (
      <div className="body">
        <Navbar />
        <Dashboard />
        <SearchBar />
        {this.props.movie && <VideoList movieSelected={this.state.movieSelected} handlePick={this.handlePick} />}
        <VideoModal movieSelected={this.state.movieSelected} handleCloseDetail={this.handleCloseDetail} />
      </div>
    );
  }
}
// REDUX

function mapStateToProps(state) {
  return state;
}

// EXPORT

// export default App;

// REDUX EXPORT

export default connect(mapStateToProps)(App);

... video_list.js

import React, { Component } from 'react';
import Slider from 'react-slick';

// MODULES

// COMPONENTS

// REDUX
import { connect } from 'react-redux';

// CSS/Other Resources

class VideoList extends Component {
  constructor(props) {
    super(props);
    console.log(this.props.handlePick);
    this.handlePick = this.handlePick.bind(this);
  }

  handlePick() {
    this.props.handlePick();
  }

  renderMovies(movieData) {
    return (
      <div className="col-md-3" key={movieData.imdbID}>
        <div className="well text-center">
          <img src={movieData.Poster} alt="Card image cap" />
          <h5>
            {movieData.Title} ({movieData.Year})
          </h5>
          <br />
          {/* {console.log(this.handlePick)}; */}
          <button onClick={() => this.handlePick()} className="btn btn-primary">
            View Detail
          </button>
        </div>
      </div>
    );
  }

  render() {
    //console.log(this.props.movie[0]);
    return (
      <div className="container">
        <div className="row" id="movies">
          {this.props.movie.map(this.renderMovies)}
        </div>
      </div>
    );
  }
}

// REDUX

function mapStateToProps({ movie }) {
  //console.log(movie);
  //console.log(typeof movie);
  return { movie };
}
// EXPORT

// export default AllVideos;

// REDUX EXPORT

export default connect(mapStateToProps)(VideoList);

... video_modal.js

import React from 'react';
import Modal from 'react-modal';

const VideoModal = (props) => (
    <Modal
        isOpen={!!props.movieSelected}
        contentLabel="Movie Detail"    
    >
        <h3>Suspicio? Bene ... tunc ibimus? Quis uh ... CONEXUS locus his diebus? Quisque semper aliquid videtur, in volutpat mauris. Nolo enim dicere. Vobis neque ab aliis. Ego feci memetipsum explicans. Gus mortuus est. Lorem opus habeo. </h3>
    <button onClick={props.handleCloseDetail}>Close Detail</button>
    </Modal>
  );


export default VideoModal;

感谢您的帮助！

将onClick函数作为道具传递给子组件并使用它来更改父组件状态

0 个答案: