React JS - uncatch TypeError:无法读取未定义的属性“绑定”

React JS - Uncaught TypeError: Cannot read property 'bind' of undefined

本文关键字：未定义属性绑定读取 JS uncatch TypeError React 更新时间：2023-09-26

我想在用户单击组件并隐藏SelectedTopicPage组件时显示TopicsList组件SingleTopicBox。但是，我收到错误：主题列表.jsx 文件Uncaught TypeError: Cannot read property 'bind' of undefined。

主控制器.jsx

import {React, ReactDOM} from '../../../build/react';
import TopicsList from '../topic-list.jsx';
import SelectedTopicPage from '../selected-topic-page.jsx';
import topicPages from '../../content/json/topic-pages.js';
export default class MainController extends React.Component {
  state = {
    isTopicClicked: false,
    topicPages
  };
  onClick(topicID) {
    this.setState({isTopicClicked: true});
    this.setState({topicsID: topicID});
  };
  render() {
    return (
      <div className="row">
        {this.state.isTopicClicked
          ? <SelectedTopicPage topicsID={this.state.topicsID} key={this.state.topicsID} topicPages={topicPages}/>
          : <TopicsList/>}
      </div>
    );
  }
};

主题列表.jsx

import {React, ReactDOM} from '../../build/react';
import SingleTopicBox from './single-topic-box.jsx';
import SelectedTopicPage from './selected-topic-page.jsx';
import topicPages from '../content/json/topic-pages.js';
export default class TopicsList extends React.Component {
  onClick(){
    this.props.onClick.bind(null, this.topicID);
  },
  render() {
    return (
      <div className="row topic-list">
        <SingleTopicBox topicID="1" onClick={this.onClick} label="Topic"/>
        <SingleTopicBox topicID="2" onClick={this.onClick} label="Topic"/>
        <SingleTopicBox topicID="3" onClick={this.onClick} label="Topic"/>
        <SingleTopicBox topicID="4" onClick={this.onClick} label="Topic"/>
      </div>
    );
  }
};

single-topic-box.jsx

import {React, ReactDOM} from '../../build/react';
export default class SingleTopicBox extends React.Component {
    render() {
        return (
            <div>
                <div className="col-sm-2">
                    <div className="single-topic" data-topic-id={this.props.topicID}>
                        {this.props.label} {this.props.topicID}
                    </div>
                </div>
            </div>
        );
    }
};

你有几个错误

您应该将onClick传递给TopicsList

render() {
  return (
    <div className="row">
      {this.state.isTopicClicked
        ? <SelectedTopicPage 
             topicsID={this.state.topicsID} 
             key={this.state.topicsID} 
             topicPages={topicPages} />
        : <TopicsList onClick={ this.onClick.bind(this) } />}
    </div>
  );
}

从TopicsList中删除onClick方法
```
 onClick() {
   // ...
 },
```

从props传递onClick回调

<SingleTopicBox topicID="1" onClick={this.props.onClick} label="Topic"/>

添加到SingleTopicBox onClick事件

<div 
   className="single-topic" 
   data-topic-id={this.props.topicID} 
   onClick={ () => this.props.onClick(this.props.topicID) }
>
  {this.props.label} {this.props.topicID}
</div>

您不需要两次呼叫setState

 onClick(topicID) {
   this.setState({
     isTopicClicked: true, 
     topicsID: topicID
   });
 }

Example