连接的组件初始渲染失败，因为 Redux 状态尚未从服务器填充答案

【问题标题】：Connected component initial render fails because Redux state is not yet populated from server连接的组件初始渲染失败，因为 Redux 状态尚未从服务器填充
【发布时间】：2018-05-19 06:18:21
【问题描述】：

我正在使用 Redux thunk 和 axios 进行服务器调用并根据结果修改状态。

问题是当我使用连接组件时，它的初始状态取决于来自服务器的数据，它不会渲染（连接的道具是空的）

render () (<div>{this.props.someData}</data>) // empty, or error, if nested

...

const mapStateToProps = state => ({
  someData: state.someData
})

我也试过这个：

componentWillMount = () => {
  this.setState({
    someData: this.props.someData
  })
}

并在render 中使用了state，但没有帮助。

有没有办法在渲染或其他解决方案之前等待服务器响应？

【问题讨论】：

你在哪里请求数据？
您好，您的代码有一些错误，您可以添加整个组件吗？
@Geraint 组件嵌套在路由器内的几层渗透，一旦我有了路由参数，我就会调用相应的数据

标签： javascript ajax reactjs redux redux-thunk

【解决方案1】：

通常你会使用 Component.defaultProps 对象来初始化你的道具。所以在你的情况下，这样的事情会在 axios 接收数据之前将你的 someData 属性设置为初始值。

class MyComponent extends React.Component {
  // ... your implementation
}

MyComponent.defaultProps = {
    someData: [] // empty array or whatever the data type is
};

编辑：docs

【讨论】：

我不认为 OP 想要呈现一个空组件，然后再更新它，而是等待，也许在数据仍在获取时显示一个加载组件，因此您的解决方案是不一定能解决问题。
他确实说过“......或其他一些解决方案”。这通常是在未收到数据时阻止组件不呈现的方法。没有什么能阻止你在组件中编写一些 if (!someData) loading else render 逻辑。

【解决方案2】：

您可以有条件地渲染该部分。使用属性来指示获取状态（在我的示例中，属性名称为 loading）。

class UserDetails extends React.Component {
    state = {
        loading: true,
        data: null
    }

    fetch() {
        this.setState({
            loading: true
        })

        // an axios call in your case
        setTimeout(() => this.setState({
            loading: false,
            data: {
                nestedValue: 'nested value'
            }
        }), 500)
    }

    componentDidMount() {
        this.fetch()
    }

    render() {
        return <div>
            {this.state.loading ? <span>loading...</span> : <div>nested prop value: {this.state.data.nestedValue}</div>}
        </div>
    }
}

【讨论】：