Question

我正在使用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
  })
}

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

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

Answer 1

您可以有条件地渲染该部分。使用属性来指示提取状态（在我的示例中，属性名称为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>
    }
}

Answer 2

通常，您将使用Component.defaultProps对象初始化道具。因此，在您的情况下，类似这样的事情会在axios收到数据之前将someData道具设置为初始值。

class MyComponent extends React.Component {
  // ... your implementation
}

MyComponent.defaultProps = {
    someData: [] // empty array or whatever the data type is
};

修改：docs

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

2 个答案: