使用 react redux 的异步数据加载持久化

Question

我遇到了异步数据问题。我有一个处理从服务器加载的数据的组件

  import React, {Component} from 'react';
import {Col, Row} from 'antd';
import {persiststore} from "../../../../store";

class Step2Question extends Component {
    constructor(props) {
        super(props);
    }
componentDidMount() {
    const questions = [];
    if (this.props.questions.length === 0) {
        this.props.callApi('GET', '/api/products/' + this.props.selectedProduct, null, this.props.token, (data) => {
            // this.setState({ranks: data.data});
            data.data.productQuestionModels.forEach(ele => {
                this.props.callApi('GET', '/api/questions/' + ele.questionId, null, this.props.token, (data) => {
                    questions.push(data.data);
                })
            })
        }, ...[, , ,], () => {
            this.props.addQuestions(questions);
            persiststore.flush().then(() => {
                this.props.disableNext(false);

            })
            persiststore.persist();
        }, 'questions');
    }
}

render() {

    return (
        <Row>
            {this.props.questions.map((ele, idx) => (
                <Col key={idx} style={{paddingTop: '30px'}} md={12} xs={12} sm={12}>
                    <strong>Question {idx + 1}: {ele.content}</strong>
                </Col>))}
        </Row>
    );
}

}

我不知道如何从服务器渲染加载问题。如果我在连接方法中使用选项{pure: false}，它将呈现一些项目而不是全部。请帮助我，非常感谢

Answer 1

这是我通常使用 React 的方式。如果我有一个想要提取数据的组件，我会设置一个应用级状态变量（数组）来保存该数据。然后我有一个应用程序级函数，它根据传递的数组（使用 setState()）更新该数组。然后，当我调用该组件时，我会向它发送 App 级数组以及该 App 级函数。在子组件内部，我将数据放入本地数组，然后使用该数组调用传递的函数。在子组件的渲染代码中，我引用了从 App 级别传递的数组（不是我填充的本地数组）。

（注意：在下面的伪代码中，我使用... 表示您现有的代码会放在这里，或者其他代码等）

应用级别

    state = {showQuestions: []}
    ...
    updateQuestions = (newQuestions) => {
        this.setState({showQuestions: newQuestions})
    }
    ...
    // then when you render (I'll assume the name of your component 
    // is Questions)
    <Questions 
        questionData={this.state.showQuestions}
        updatefunc={this.updateQuestions}
    />

子组件文件（在您上面的代码中）

...
componentDidMount() {
    // use your code above, I'm assuming you are putting data 
    // into the questions array
    ...
    // after you've got the questions array all set up with all data
    this.props.updatefunc(questions)
    ...
}
...
// now down in the render of your Questions component
render() {
    return(
        ...
        this.props.questionData.map(... <your other code))
        ...
}

附带说明一下，在我使用的 React 代码中，我不执行构造函数。 this.props. 语法在不这样做的情况下可用。所以也许我和你的 React 版本不同。我也不熟悉您在render() 中显示的<'row'> 元素。因此，我不知道这些事情是否意味着我上面的示例将按预期运行。我建议在周围散布console.log() 语句，这样你就可以看到哪些数据在哪里传递等等。祝你好运。