在React模板渲染上调用函数

Question

I need the template questionsCollected to call the getQuestions function when the template is rendered. I am able to call a function when an event is fired, but in this case I want the function to fire when the template is rendered and populate the options in the select menu.

• The ajax call is successful and returns the option items. I can log the return to the console.
• The shell of the template is successfully rendering to the page.

How do I call a function from within the template without utilizing an event (onClick, etc)?

Thanks!

                 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

Are you familiar with the react lifecycle? Check out this page, I refer to it often:

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

I think you want to move the ajax call to componentDidMount. Upon its success you can call setState to set your questions from the ajax call in state, then your render method reads from the state object for the questions. Kind of like this:

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

Hope that helps