Question

我想从子组件设置父组件的状态。我尝试使用道具，但它给出错误Uncaught TypeError: this.props.setTopicClicked is not a function。是否有更有效的方法来设置父组件的状态而不是使用道具？我想设置isTopicClicked: true

的状态

主要-controller.jsx

import {React, ReactDOM} from '../../../build/react';

import SelectedTopicPage from '../selected-topic-page.jsx';
import TopicsList from '../topic-list.jsx';
import topicPageData from '../../content/json/topic-page-data.js';

export default class MainController extends React.Component {

  state = {
    isTopicClicked: false,
    topicPageData
  };

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

  setTopicClicked(event){
    this.setState({isTopicClicked: event});
  };

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

选择-主题-page.jsx

import {React, ReactDOM} from '../../build/react';

import SelectedTopicPageMarkup from './selected-topic-page-markup.jsx';
import NextPrevBtn from './next-prev-btn.jsx';

export default class SelectedTopicPage extends React.Component {
    state = {
        topicPageNo: 0,
        total_selected_topic_pages: 1
      };
    navigateBack(topicPageNo) {
        if (this.state.topicPageNo > 0){
            topicPageNo = this.state.topicPageNo - 1;
        }
        else {
            topicPageNo = 0;
        }
        this.setState({topicPageNo : topicPageNo});
    };
    navigateNext(totalPagesInSelectedTopic) {
        let topicPageNo;
        if (totalPagesInSelectedTopic > this.state.topicPageNo + 1){
            topicPageNo = this.state.topicPageNo + 1;
        }
        else if (totalPagesInSelectedTopic == this.state.topicPageNo + 1) {
          this.props.setTopicClicked(true);
        }
        else {
            topicPageNo = this.state.topicPageNo;
        }
        this.setState({topicPageNo : topicPageNo});
    };
    render() {
        let topicsID = this.props.topicsID;
        let topicPageNo = this.state.topicPageNo;
        return (
            <div>
                {this.props.topicPageData.filter(function(topicPage) {
                    // if condition is true, item is not filtered out
                    return topicPage.topic_no === topicsID;
                }).map(function (topicPage) {
                    let totalPagesInSelectedTopic = topicPage.topic_pages.length;
                    return (
                        <div>
                            <div>
                            <SelectedTopicPageMarkup headline={topicPage.topic_pages[0].headline} key={topicPage.topic_no}>
                                {topicPage.topic_pages[topicPageNo].description}
                            </SelectedTopicPageMarkup>
                            </div>
                            <div>
                                <NextPrevBtn moveNext={this.navigateNext.bind(this, totalPagesInSelectedTopic)} key={topicPage.topic_no} moveBack={this.navigateBack.bind(this, topicPageNo)}/>
                            </div>
                        </div>
                    );
                }.bind(this))}
            </div>
        );
    };
};

Answer 1

您似乎忘了将setTopicClicked传递给孩子：

setTopicClicked={this.setTopicClicked.bind(this)}

Answer 2

您的<SelectedTopicPage />不包含setTopicClicked props，导致错误

<SelectedTopicPage
    topicsID={this.state.topicsID}
    key={this.state.topicsID}
    topicPageData={topicPageData}/>

您可以尝试使用flux实现来处理应用程序的状态，并将props传递给组件。否则，我认为你在使用组件或其子组件设置状态时会遇到困难。

如何在React中从子组件setState

2 个答案: