我的组件应该显示/隐藏时，一个按钮被点击没有渲染点击

Question

我有一个课程页面，上面有学生列表作为按钮。单击时，按钮应该呈现ShowStuentInfo，但是当嵌套在内部时（如果state.is单击），我的ShowStuentInfo组件不会在单击时呈现。在条件之外，它工作得很好，但我需要条件，否则一切都会显示在课程页面渲染上。

主菜成分

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions/index';
import { Redirect } from 'react-router';
import { Link } from 'react-router-dom';
import ShowStudentInfo  from '../ShowStudentInfo/ShowStudentInfo'

class CoursePage extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      course: {},
      student: {},
      isClicked: false
    };
    console.log(this.props.match.params.cuid)
    this.onClick = this.onClick.bind(this)
  }

  onClick(event) {
    event.preventDefault()
    console.log(this.state.isClicked)
    this.setState({
      isClicked: !this.state.isClicked
    })
  }
  componentDidMount() {
    this.props.dispatch(actions.getCourse(this.props.match.params.cuid));
    this.props.dispatch(actions.getStudents());
  }

  render() {
    let studentList = this.props.student
    const students = Object.keys(studentList).map(student => studentList[student])
    const currentStudents = students.map(student => {
      if ((this.props.match.params.cuid) == student.courses) {
        return (
          <p>
            <button className="students" id={student._id} onClick={this.onClick}>{student.firstName} {student.lastName}</button>
          </p>
        )
        if (this.state.isClicked) {
          return (
            <div className="student-info">
              <ShowStudentInfo firstName={student.firstName}
              lastName={student.lastName} phoneNumber={student.phoneNumber} />
        </div>
      )
        }
      }
    })
    return (
      <div>
        <h1>{this.props.course.name}</h1>
        <Link to={`/addStudent/${this.props.match.params.cuid}`}> Add a new student</Link>
        <div className="studentList">Your students{currentStudents} </div>
      </div>
    );
  }
}
const mapStateToProps = (state, props) => {
  return {
    course: state.course.course,
    student: state.student.students
  }
}

export default connect(mapStateToProps)(CoursePage)

我的ShowStudentInfo组件

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions/index';
import { Redirect } from 'react-router';
import { Link } from 'react-router-dom';

class ShowStudentInfo extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      student: {
        firstName: '',
        lastName: '',
        phoneNumber: ''
      },
      isClickedEdit: false,
      isClickedDelete: false
    }
    this.isClickedEdit = this.isClickedEdit.bind(this)
    this.isClickedDelete = this.isClickedDelete.bind(this)
  }
  isClickedEdit(event) {
    this.setState({
      isClickedEdit: true
    })
  }
  isClickedDelete(event) {
    this.setState({
      isClickedDelete: true
    })
  }
  render() {
    return (
      <div className="student-info-container">
        <p>Name: {this.props.firstName} {this.props.lastName}</p>
        <p>Phone Number: {this.props.phoneNumber}</p>
      </div>
    )
  }
}

if (this.state.isClicked) {
      return (
        <div className="student-info">
          <ShowStudentInfo firstName={student.firstName}
          lastName={student.lastName} phoneNumber={student.phoneNumber} />
    </div>
  )
    }

是要查看的最重要的部分，信息在没有onClick条件的情况下正常呈现。

Answer 1

这只是你逻辑中的一点重构：）希望它能帮助你。

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions/index';
import { Redirect } from 'react-router';
import { Link } from 'react-router-dom';
import ShowStudentInfo from '../ShowStudentInfo/ShowStudentInfo'

class CoursePage extends React.Component {

  state = {
    course: {},
    student: {},
    isClicked: false
  };

  onClick = (event) => {
    event.preventDefault()
    console.log(this.state.isClicked)
    this.setState({
      isClicked: !this.state.isClicked
    })
  }

  getCurrentStudents = (students) => {
    const { match } = this.props
    const { isClicked } = this.state

    return students.map(student => {
      if (match.params.cuid == student.courses) {
        return (
          <div>
            <p><button className="students" id={student._id} onClick={this.onClick}>
              {student.firstName} {student.lastName}
            </button></p>
            {isClicked && this.getStudentInfo(student) }
          </div>
        )
      }
    })
  }

  getStudentInfo = (student) => (
    <div className="student-info" >
      <ShowStudentInfo
        firstName={student.firstName}
        lastName={student.lastName}
        phoneNumber={student.phoneNumber} />
    </div>
  )


  componentDidMount() {
    let { match, dispatch } = this.props
    dispatch(actions.getCourse(match.params.cuid));
    dispatch(actions.getStudents());
  }

  render() {
    let { studentList, match, course } = this.props
    const students = Object.keys(studentList).map(student => studentList[student])
    const currentStudents = this.getCurrentStudents(students)

    return (
      <div>
        <h1>{course.name}</h1>
        <Link to={`/addStudent/${match.params.cuid}`}> Add a new student</Link>
        <div className="studentList">Your students{currentStudents} </div>
      </div>
    );
  }
}

const mapStateToProps = (state, props) => {
  return {
    course: state.course.course,
    student: state.student.students
  }
}

export default connect(mapStateToProps)(CoursePage)

Answer 2

map函数包含2个返回函数，而第一个返回将导致它转到当前迭代过程中的下一项

if ((this.props.match.params.cuid) == student.courses) {
    return (
      <p>
        <button className="students" id={student._id} onClick={this.onClick}>{student.firstName} {student.lastName}</button>
      </p>
    )
    // this will never hit in case the previous statement is evaluates to true
    if (this.state.isClicked) {
      return (
        <div className="student-info">
          <ShowStudentInfo firstName={student.firstName}
          lastName={student.lastName} phoneNumber={student.phoneNumber} />
        </div>
        )
    }
}

为了实现您想要做的事情（我猜您希望它成为第一个return语句的一部分），您可以这样做

if ((this.props.match.params.cuid) == student.courses) {
    return (
      <p>
        <button className="students" id={student._id} onClick={this.onClick}>{student.firstName} {student.lastName}</button>
        { this.state.isClicked && <div className="student-info">
          <ShowStudentInfo firstName={student.firstName}
          lastName={student.lastName} phoneNumber={student.phoneNumber} />
        </div> }
      </p>
      )
}

请注意：这将显示学生的信息作为p标签的一部分在屏幕上的所有学生，我看不出你在哪里限制显示用户的信息为一个点击的学生。

另一方面，是否确实要将球场对象与cuid参数进行比较？