Question

我创建了一个父类，它包含两个子组件，其中一个子组件试图将数据传回父组件状态。当我运行代码时，我没有得到任何运行时错误，但是将数据发送回父级的子级根本没有渲染（甚至最初）。所有组件都是大写的，因此不是问题。我认为它与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>
    )
  }
}

Answer 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是一个对象，那应该有效。

在map函数的回调中：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可能是字符串。

Answer 2

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

反应子组件不呈现

2 个答案: