这可能有点令人困惑，所以我会尽量简化它。

我的状态包含父组件 App.js 中的对象数组。这是一个对象的示例。

{
category: "sample category",
API: "API URL",
active: function()
}

在我的子组件 Category.js 中，我通过 prop 传递了该数组。子组件渲染 ul ，然后映射到数组上以为每个类别创建一个 li 。每个列表项都应该有一个 onClick 事件，该事件触发对象中关联的 active: function() 。

由于某种原因，这不起作用。如果我运行测试，其中函数是一个简单的 console.log("success") ，那就没问题了。因此，列表项正在选择该函数并通过我的 props 正常运行它。

这让我相信问题出在我正在运行的实际函数上。我尝试运行的函数是这个（位于 App.js 中）

function() {
  this.setState({categoryActive: "https://opentdb.com/api.php?amount=20&category=11"});
  this.setState({showQuestions: true});
}

正在设置的那些状态位于 App.js 中，并且该函数也位于 App.js 中，但正在通过 Category.js 中的列表项的 prop 运行。这是我的问题吗？我无法通过在子组件中运行函数来调整 App.js 的状态吗？

编辑：这里有更多代码可帮助您找出解决方案。

实际错误：Uncaught TypeError：无法读取 catMovies (App.js:71) 中未定义的属性“setState”

App.js:71 是我的 catMovies() 函数的 this.setState({categoryActive: "https://opentdb.com/api.php?amount=20&category=11"}); 。

我的 App.js 构造函数

constructor(props) {
super(props);
this.state = {
  showCategories: false,
  showQuestions: false,
  isQuestionLoaded: false,
  categories: [{
    category: "movies",
    API: "https://opentdb.com/api.php?amount=10&category=11",
    active: this.catMovies
  }, {
    category: "sports",
    API: "https://opentdb.com/api.php?amount=10&category=21",
    active: this.catSports
  }, {
    category: "books",
    API: "https://opentdb.com/api.php?amount=10&category=10",
    active: this.catBooks
  }, {
    category: "videogames",
    API: "https://opentdb.com/api.php?amount=10&category=15",
    active: this.catVideogames
  }, {
    category: "general",
    API: "https://opentdb.com/api.php?amount=10&category=9",
    active: this.catGeneral
  }, {
    category: "everything",
    API: "https://opentdb.com/api.php?amount=10",
    active: this.catEverything
  }],
  categoryActive: "",
  questionNumber: 0,
  questionTotal: null,
  correct: [],
  score: 0,
  showFinal: false,
  testState: "test"
};
this.showCategories = this.showCategories.bind(this);
this.showQuestions = this.showQuestions.bind(this);
this.catMovies = this.catMovies.bind(this);
}

这是 App.js 中的实际函数：

catMovies() {
  this.setState({categoryActive: "https://opentdb.com/api.php?amount=20&category=11"});
  this.setState({showQuestions: true});
}

这是调用子组件的 App.js 的返回值：

<Categories categoryList={ this.state.categories } onClick={ this.catMovies } />

最后，这是子组件中使用所有这些的映射：

const categoryListItems = this.props.categoryList.map(cat =>
  <a href="#questionsContainer" key={cat.category + "link"}>
    <li onClick={cat.active} key={cat.category}>
      {cat.category}
    </li>
  </a>
);