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（））更新该数组。然后，当我调用组件时，我将其发送给应用程序级别的数组以及该应用程序级别的函数。在子组件内部，我将数据放入本地数组，然后使用该数组调用传递的函数。在子组件的渲染代码中，我指的是从应用程序级别传递的数组（而不是我填充的本地数组）。

（注意：在下面的伪代码中，我使用...表示您现有的代码将在此处使用，或其他代码，等等）

应用级别

    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。另外，我对您在<'row'>中显示的render()元素也不熟悉。因此，我不知道这些事情是否意味着我上面的示例将按预期运行。我建议在周围撒上console.log()条语句，这样您就可以看到在哪里传递了什么数据，等等。祝您好运。

使用React Redux的异步数据加载持续存在

1 个答案: