reactjs - 构造函数中的数组道具为空

Question

我有一个带有 prop 的组件，它是一个对象数组。问题是它是空的，constructor()即使其他具有原始值的道具也被填充了，render()它也被填充了。为什么会这样，如何在构造函数中传递数组？组件：

import React, { Component } from "react";
import { Dropdown } from "semantic-ui-react"

class SearchableDropdown extends Component {
    defaultOptions = []
    allOptions = []

    constructor(props) {
        super(props)
        console.log(props.options) //empty here
    }

    search = (event, { searchQuery }) => {
        console.log(searchQuery)
    }

    render () {
        console.log(this.props.options) //but filled here
        return (
            <Dropdown selection search onSearchChange={this.search} {...this.props}/>
        )
    }
}

export { SearchableDropdown }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

组件渲染：

<SearchableDropdown name='city' value={city} onChange={this.handleChange} placeholder='City' options={this.props.cities}/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

标签： reactjs

Answer 1

这是因为optionsprops 需要一段时间才能到达SearchableDropdown组件。

你需要使用componentWillReceiveProps()

constructor(props) {
    super(props)
    console.log(props.options) //empty here
    this.state = {
      options: null, // options should be here
    }
}

componentWillReceiveProps(nextProps){
    if(nextProps.options !== this.props.options){
         this.setState({ options: nextProps.options })
    }
}

search = (event, { searchQuery }) => {
    console.log(searchQuery)
}

render () {
    console.log(this.props.options) //but filled here
    return (
        <Dropdown selection search onSearchChange={this.search} {...this.props}/>
    )
}

}