首页 文章

反应子组件不呈现

提问于
浏览 次
0

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

Parent Class

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>
    )
  }
}

Child component that is not rendering

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>
    )
  }
}
javascript reactjs

2 回答

  • 0

    在 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 => { Subject s参数的名称与全局Subjects对象发生冲突 . 尝试将其更改为： filteredSubjects.map(subject=> { 并将subject.id传递给 triggerListChange . 即; 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 可能是字符串 .

    回复于
  • 0

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

    回复于

相关问题