反应子组件不渲染答案

【问题标题】：React Child Component Not Rendering反应子组件不渲染
【发布时间】：2017-05-12 17:58:32
【问题描述】：

我创建了一个包含两个子组件的父类，其中一个子组件尝试将数据传递回父组件的状态。当我运行代码时，我没有收到任何运行时错误，但是将数据发送回父级的子级根本没有渲染（即使是最初）。所有组件都大写，所以这不是问题。我认为这与 OnClick 函数中的语法或我将道具传递回父级的方法有关。我是 React 新手，因此我们将不胜感激！

父类

  class DropdownParent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {propsForClassDropdown: []};
    this.getClasses = this.getClasses.bind(this);
  }

  getClasses(subjectTitle){
    var chosenSubject = Subjects.subjectTitle;
    this.setState({propsForClassDropdown: {chosenSubject}.classes})
  }


  render(){
    return(
    <div className = "DropdownContainer">
      <SubjectDropdown triggerListChange = {this.getClasses} />
      <ClassDropdown />     //this one renders properly
    </div>
    )
  }
}

未呈现的子组件

class SubjectDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = { searchTerm: "", searchStarted: false };
    this.searchUpdated = this.searchUpdated.bind(this);
  }
  searchUpdated (term) {
    this.setState({searchTerm: term, searchStarted: true})
  }

  render(){
    console.log("rendering");
    const filteredSubjects = Subjects.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))
    return(
    <div>
      <div className = "SubjectDropdownContainer">
        <SearchInput className='search-input' onChange={this.searchUpdated} />
            <div className = 'SubjectDropdown'>
              {filteredSubjects.map(Subjects => {
                  return (
                    <div>
                    <Button className = "dropdownItem" key={Subjects.id} onClick={()=>this.props.triggerListChange(key)}>
                      {Subjects.subject.name}
                    </Button>
                    </div>
                  )
              })}
            </div>
      </div>
    </div>
    )
  }
}

【问题讨论】：

请展示您如何导出和导入子组件。 :)
您是否遇到任何错误？是否到达console.log("rendering");？
console.log("rendering") 永远无法到达

标签： javascript reactjs

【解决方案1】：

在您的 onClick 处理程序中，您将 key 传递给 triggerListChange，但未在任何地方定义 key。

{filteredSubjects.map(Subjects => {
              return (
                <div>
                <Button className = "dropdownItem" key={Subjects.id} onClick={()=>this.props.triggerListChange()}>
                  {Subjects.subject.name}
                </Button>
                </div>
              )
          })}

假设Subjects 在父子组件的范围内，并且Subject 是一个对象，应该可以工作。

在映射函数的回调中：filteredSubjects.map(Subjects => { Subjects 参数的名称与您的全局 Subjects 对象冲突。尝试将其更改为：filteredSubjects.map(subject=> { 并将 subject.id 传递给 triggerListChange。 IE; onClick={() => this.props.triggerListChange(subject.id)

在您的 getClasses 函数中：

getClasses(subjectTitle){
  var chosenSubject = Subjects.subjectTitle;
  this.setState({propsForClassDropdown: {chosenSubject}.classes})
}

将var chosenSubject = Subjects.subjectTitle 更改为通过括号[] 表示法访问属性：Subjects[subjectTitle]，因为您的主题对象中的id 可能是一个字符串。

【讨论】：

说我想将key的值（等于{Subjects.id}）作为参数传递给触发函数。我该怎么做？我尝试将 {Subjects.id} 作为参数传递，但没有成功。
在 jsx 属性中声明箭头函数并不是最优的，因为每次重新渲染组件时都会创建箭头函数。我不想在我的回答中指出这一点，因为您刚刚开始使用 react，您可以在进行更多研究时进行优化。在对您的地图的回调中：filteredSubjects.map(Subjects => {SubjectsSubjects 参数的名称与您的全局主题对象冲突。尝试将其更改为：filteredSubjects.map(subject=> { 并传递 subject.id 并传递给 triggerListChange。编辑答案以包含此内容。

【解决方案2】：

原来我在父组件中的导出语句不正确。不知道为什么其中一个组件仍在渲染。

【讨论】：