我需要帮助尝试在 React 游戏中连接我的不同组件答案

【问题标题】：I need help trying to connect my different components in a React game我需要帮助尝试在 React 游戏中连接我的不同组件
【发布时间】：2020-06-24 00:27:01
【问题描述】：

这是我在这里的第一个问题，所以我希望我做得对。我正在使用 React 和 API Open Trivia Database 开发一个琐事游戏。我为组件问题和类别制作了两个单独的页面，但我不知道如何将它们放到主页上......坦率地说，从那里去哪里。感谢您的宝贵时间。

这是我的主页：

import React from 'react'
import './App.css'
// import axios from 'axios'
import Questions from './components/questions'
import Categories from './components/categories'

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      questions: [],
      categories: []
      // score: 0,

    }
  }

  render () {
    return (
      <div className='App'>
        <h2>Trivia Game</h2>
        {this.state.Questions}

      </div>
    )
  }
}
export default App

这是问题页面：

import React from 'react'
import axios from 'axios'

class Questions extends React.Component {
  constructor () {
    super()
    this.state = {
      questions: []

    }
  }

  componentDidMount () {
    axios
      .get('https://opentdb.com/api.php?amount=10')
      .then(response => {
        console.log(response.data)
        this.setState({
          questions: response.data.results
        })
      })
  }

  componentWillUnmount () {
    console.log('componentDidUnmount')
  }

  render () {
    return (
      <div className='Questions'>
        <h2>Questions</h2>
        <ul>
          {this.state.questions.map((question, index) => (
            <li key={index}>{question.question}</li>
          ))}
        </ul>
      </div>
    )
  }
}
export default Questions

【问题讨论】：

标签： javascript reactjs api

【解决方案1】：

看起来您正在将问题和类别组件导入 App.js 文件，但您没有呈现它们。

您的退货声明应如下所示：

    return (
      <div className='App'>
        <h2>Trivia Game</h2>
         <Questions questions={this.state.questions} />
         <Categories categories={this.state.categories}/>

      </div>
    )

您还需要将应用的状态切片传递给相应的组件。我注意到您在 App 状态和 Questions 状态中有问题数组。通常你应该尽量避免重复状态并将其保持在最需要的组件，在这种情况下它看起来是 App.js

【讨论】：

非常感谢！！这太棒了！
如果您不介意，我有一个后续问题......当问题出现在页面上并且涉及引用时，它会显示为“蝇王”。 "例如.... 这与 API 中的 URL 或它是如何传递的有关吗？一些格式问题？
我会在您从 API 收到数据后立即对数据进行控制台记录，以查看是您获取数据的方式还是您的客户端/浏览器显示数据的方式。可能发生的一件事是，您的客户可能会将撇号误认为引号的结尾，即“Hello World”。在这种情况下，您可以 1）通过在撇号前添加 \ 来转义它，2）用双引号括住字符串 3）用反引号括住字符串，即 `

【解决方案2】：

您已经在主页中导入了它们，现在只需将它们插入：

render () {
    return (
      <div className='App'>
        <h2>Trivia Game</h2>
        //   {this.state.Questions}   not sure what you wanted to do with this
        <Categories />
        <Questions />
      </div>
    )
  }

你也可以通过在之后添加一个属性来将 props 传递给它们...见here

【讨论】：

是的，我不确定我想在那里做什么哈哈，只是把东西扔到墙上看看它们是否粘住。非常感谢您的帮助！！

【解决方案3】：

这通常看起来不错，但我认为您可能需要对如何在 React 中使用 state 和 props 进行更多研究。

您的组件和组件都可以完美运行，您只需要学习同步它们即可。现在，两者之间没有任何交互，所以两个文件中都有no need for a constructor，至少现在，我会将任何带有“问题”的东西都保留在主组件的状态之外——让问题组件来做那里的繁重工作。

为了简化代码，您的主页可以如下所示：

import React from 'react'
import './App.css'
import Questions from './Questions'

class App extends React.Component {
  render () {
    return (
      <div className='App'>
        <h2>Trivia Game</h2>
        <Questions/>
      </div>
    )
  }
}

并且问题文件可以保持不变，除了对构造函数进行快速简化

import React from 'react'
import axios from 'axios'

class Questions extends React.Component {
    state = {
      questions: []
    }

  componentDidMount () {
    axios
      .get('https://opentdb.com/api.php?amount=10')
      .then(response => {
        console.log(response.data)
        this.setState({
          questions: response.data.results
        })
      })
  }

  componentWillUnmount () {
    console.log('componentDidUnmount')
  }

  render () {
    return (
      <div className='Questions'>
        <h2>Questions</h2>
        <ul>
          {this.state.questions.map((question, index) => (
            <li key={index}>{question.question}</li>
          ))}
        </ul>
      </div>
    )
  }
}
export default Questions

随着您的代码变得越来越复杂，您可能需要添加一个构造函数来传递 props 并使这些函数组件交互，但最好是在此基础上构建并尽可能简单地开始。

【讨论】：