javascript - Reactjs 在打印获取的数据时出现问题

Question

super 菜鸟问题。然而，我已经被这个问题困扰了很长时间了。我一直在搜索并发现了类似的问题，但未能解决。我希望有人能指出我做错了什么的正确方向。

我正在从 API 获取数据，并且我能够注销该数组，但是，当我尝试打印它时，我没有运气。一开始，我将其传递给 reducer ，但后来意识到这并不理想。现在我正在尝试让它工作，然后我会将代码重构为功能组件。

fetchOrders = async () => {
        await axios.get('http://localhost:4200/ordenes').then( res => {
            this.setState({
                prescription: res.data
            })
        })
    }

    render() {
        console.log(this.state.prescription)
        return (
            <div >
                <Paper style={styles.orderCard}id='orderCardContainer' >
                    <div id="profileCardContainer" style={styles.profileCard}>
                        <aside className='profileCardContainer'>
                            <ProfileCard />
                        </aside>
                    </div>
                        {this.renderOrder()}
                </Paper>
            </div>
        )
    }
}

我从 API 收到的数组看起来像这样:

Array(18)
0: {order: Array(3), _id: "5b2af38fb315eb5630a0bc78", physicianName: "Alejandro", patientName: "Alex", createdAt: "2018-06-21T00:38:39.376Z", …}

更新:

class OrderCard extends Component {
    constructor(props) {
        super(props)
        this.state = { prescription: []}
    }

    fetchOrders = async () => {
        const res = await axios.get('http://localhost:4200/ordenes')
        this.setState({
            prescription: res.data
        })
    }

    componentDidMount() {
        this.fetchOrders()
    }

    renderOrder() {
        if (this.state.prescription.length === 0 ) {
            return ( 
                <h1>Loading...</h1>
            )
        } else {
            return (
                this.state.prescription.map( (x, i) => {
                    <li>
                        {console.log(x.patientName)}
                        <h1>{ x.patientName }</h1>
                    </li>
            })
        )}
    }

    render() {
        console.log(this.state.prescription)
        return (
            <div >
                <Paper style={styles.orderCard}id='orderCardContainer' >
                    <div id="profileCardContainer" style={styles.profileCard}>
                        <aside className='profileCardContainer'>
                            <ProfileCard />
                        </aside>
                    </div>
                    <div id='orders' >
                        { this.renderOrder() }
                    </div>
                </Paper>
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        auth: state.auth.authenticated,
    }
}

export default connect(mapStateToProps, actions)(OrderCard)

后端架构

const orderObj = new Schema({
    name: String,
    price: Number,
 }, { _id : false })

const orderSchema = new Schema (
    {
        physicianName: String,
        patientName: String,
        order: {type: [orderObj]}
    }, 
    { 
        timestamps: true
    }
)

POSTMAN API 结果

[
    {
        "order": [
            {
                "name": "Asteraceae",
                "price": 41.24
            },
            {
                "name": "Liliaceae",
                "price": 39.24
            },
            {
                "name": "Fabaceae",
                "price": 34.91
            }
        ],
        "_id": "5b2af38fb315eb5630a0bc78",
        "physicianName": "Alejandro",
        "patientName": "Alex",
        "createdAt": "2018-06-21T00:38:39.376Z",
        "updatedAt": "2018-06-21T00:38:39.376Z",
        "__v": 0
    }
]

预先感谢您的提示。

Answer 1

括号错误，您没有返回 react 元素，请尝试修复一个。

renderOrder() {
    if (this.state.prescription.length === 0 ) {
        return ( 
            <h1>Loading...</h1>
        )
    } else {
        return (
            this.state.prescription.map((x, i) => (
                <li>
                    {console.log(x.patientName)}
                    <h1>{ x.patientName }</h1>
                </li>
        ))
    )}
}

并解决这个问题

fetchOrders = async () => {
  const res = await axios.get('http://localhost:4200/ordenes');
  this.setState({
    prescription: res.data
  });
}