Question

我需要模板questionsCollected在渲染模板时调用getQuestions函数。我可以在触发事件时调用函数，但在这种情况下，我希望在渲染模板时触发函数并填充选择菜单中的选项。

ajax调用成功并返回选项。我可以将返回记录到控制台。
模板的shell已成功呈现到页面。

如何在不使用事件（onClick等）的情况下从模板中调用函数？

谢谢！

                 class myClass extends React.Component {
                      constructor () {
                        super()

                        this.state = {
                          isActive: false,
                        }
                        this.getQuestions = this.getQuestions .bind(this)
                      }


                  getQuestions () {
                    const token = `xxxx`
                    const url = 'https://api.com' + token

                    Ajax.get(url).then(function (response) {
                      const data = JSON.parse(response.response)

                      const questions = []

                      Object.keys(data).forEach(function (value, key) {
                        questions.push(<option> + data.features[key].properties.question + </option>)
                      })

                      return questions
                    })
                  }

              render () {        
                return <menuItems
                  children={this.renderChildren()}
                />
              }
              renderChildren () {
               const questionsCollected = (
                  <div key='questionText' id='question'>
                    <select>
                      <option>Questions</option>
                      {this.getQuestions}
                    </select>
                  </div>
                )
               return [questionsCollected]
            }


    export default myContainer

Answer 1

您熟悉反应生命周期吗？看看这个页面，我经常提到它：

http://busypeoples.github.io/post/react-component-lifecycle/

我想你想把ajax调用移到componentDidMount。成功后，您可以调用setState来设置状态中的ajax调用问题，然后您的render方法从状态对象中读取问题。有点像这样：

https://daveceddia.com/ajax-requests-in-react/

希望有所帮助

在React模板渲染上调用函数

1 个答案: