javascript - 在 React 模板渲染上调用函数

Question

我需要模板 questionsCollected 在呈现模板时调用 getQuestions 函数。我可以在事件触发时调用函数，但在本例中，我希望在渲染模板并填充选择菜单中的选项时触发该函数。

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

如何在不使用事件(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

您熟悉 React 生命周期吗？查看此页面，我经常引用它:

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

我认为您想将 ajax 调用移至 componentDidMount。成功后，您可以调用 setState 将 Ajax 调用中的问题设置为状态，然后您的渲染方法从状态对象中读取问题。有点像这样:

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

希望有帮助