Question

我试图在渲染视图中从道具中获取值。

我从我的数据库中获取电子商务商店数据。

componentWillMount(){
    this.props.dispatch(fetchStore())
}

此操作有效并返回数据。

这是我的控制台日志

我遇到的问题是，当我访问道具商店的价值。我收到此控制台错误

<FormGroup>
   <Label htmlFor="name">Name *</Label>
   <div className="controls">
        <InputGroup>
            <Input id="name" size="16" type="text" value={this.props.store.store.name} />
        </InputGroup>
   </div>
</FormGroup

我认为我的观点是在我的调度员完成请求之前获得渲染。

我知道这一点，因为当我在控制台中记录道具时，我得到了这个。

//Inside my render()

console.log(this.props.store)

此输出。

第一次道具商店未定义但是一旦redux商店重新渲染，我就会获得电子商务商店数据。

我想知道如何让我的渲染等待我的数据在渲染之前完成请求。

这是我的行为，以防我做错事。

我使用redux-thunk中间件进行承诺。

import axios from 'axios'

export function fetchStore() {
    return function(dispatch) {
        axios.get('http://localhost:5000/_Store/Details')
            .then((res) => {
                dispatch({type: 'FETCH_STORE_FULFILLED', payload: res.data})
            })
            .catch((err) => {
                dispatch({type: 'FETCH_STORE_REJECTED', payload: err})
            })
    }
}

Answer 1

您不必等待redux存储在渲染之前更新，而是放置一个条件来检查未定义的值，如

<FormGroup>
   <Label htmlFor="name">Name *</Label>
   <div className="controls">
        <InputGroup>
            <Input id="name" size="16" type="text" value={this.props.store?
 this.props.store.store.name: ''} />
        </InputGroup>
   </div>
</FormGroup>

Answer 2

您可以在渲染功能中添加一个检查，以便在设置之前检查名称道具是否存在。这将最初呈现空白输入，但会在从API中获取名称后设置名称。

<FormGroup>
   <Label htmlFor="name">Name *</Label>
   <div className="controls">
        <InputGroup>
            <Input id="name" size="16" type="text" value={(this.props.store != undefined && this.props.store.store != undefined) ? this.props.store.store.name : ''} />
        </InputGroup>
   </div>
</FormGroup>

Answer 3

尝试使用componentDidMount代替componentWillMount

componentDidMount(){ 
    this.props.dispatch(fetchStore()) 
 }

根据组件生命周期componentWillMount先执行componentWillMount然后render

React Redux如何获取输入值

3 个答案: