class Select extends React.PureComponent {
constructor(props) {
super(props)
this.state = { value: this.props.defaultValue }
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
e.persist()
if (typeof this.props.onDataChange !== 'undefined') {
this.setState({ value: e.target.value }, () => this.props.onDataChange(e))
} else {
this.setState({ value: e.target.value })
}
}
render() {
const { options } = this.props
return (
<div>
<select
value={this.state.value}
onChange={this.handleChange}
>
{options.map((option, i) => {
const value = option.value || option.path || null
const label = option.label || option.name || option
return (
<option key={`option-${i}`} value={value}>
{label}
</option>
)
})}
</select>
</div>
)
}
}
class Display extends React.PureComponent {
constructor(props) {
super(props)
}
async getSomeValues() {
try {
this.setState({ isReady: false })
await Axios.get(`some-values`)
.then(async (result) => {
this.setState({
values: result.data.values,
default: result.data.default
})
})
} catch (error) {
console.log(error)
} finally {
this.setState({ isReady: true })
}
}
componentDidMount() {
this.getSomeValues()
}
render() {
return (
<Select
options={this.state.values}
defaultValue = {this.state.defaultValue}
/>
)
}
}
我正在尝试解决我认为非常简单的问题。我有一个父组件,其中包含一个正在渲染选择下拉列表的子组件。
我的 parent 调用 API 服务并拉回要在选择下拉列表中显示的项目列表。我的 API 返回要显示的一组选项以及在加载时选择的初始值。
初始渲染采用 defaultValue 属性并设置要在选择组件构造函数的初始实例中显示的状态,我遇到的问题是 api 调用是在初始渲染之后完成的,因此默认值始终结果为空。
我需要一种机制来将选择下拉列表的值设置为加载时的初始值,但它必须作为组件加载后发生的 api 调用的结果来完成?
将状态值设置为初始加载时从 API 返回的值的最简洁方法是什么?
我确信这一定是一个容易解决的问题,但我一直在我想做的事情和 react 中的加载/渲染模式之间陷入困境。
如有任何帮助,我们将不胜感激。
最佳答案
我看到两个选项:
选项 1
您可以阻止渲染 Select
组件,直到请求完成。这意味着您的构造函数将在您获得数据后触发并正确初始化。
render() {
if (this.state.defaultValue) {
return (
<Select
options={this.state.values}
defaultValue={this.state.defaultValue}
/>
)
} else {
return null; // or loading graphic
}
}
选项 2
在您的 Select
组件中,使用诸如 componentDidUpdate
之类的生命周期方法来检查 defaultValue
属性自上次渲染以来是否已更改。如果是这样,请在 state 中设置默认值。这将使 defaultValue
仅设置一次。
componentDidUpdate(prevProps) {
if (this.props.defaultValue !== prevProps.defaultValue) {
this.setState({ defaultValue: this.props.defaultValue });
}
}
关于javascript - 在从 API 调用填充的 react 选择下拉列表中设置默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58662759/