Question

我只能在使用对象时才能映射数据，但是在使用数组时，它无法工作。

命令行中没有错误，只输出任何内容。

帮助表示赞赏。

由于

import React from 'react';
import ReactDOM from 'react-dom';

class JoeApp extends React.Component {
    render() {
        var data = [
            {
                name: "Joe",
                age: 27
            },
            {
                name: "John",
                age: 27
            },
            {
                name: "Bill",
                age: 25
            }
        ];

        return (
            <Data data={data} />
        );
    }
}

class Data extends React.Component {
    render() {
        return (
            <div>{this.props.data.name.map((info) => info.name})}</div>
        );
    }
}

ReactDOM.render(<JoeApp />, document.body);

Answer 1

您需要在数组本身上使用.map()函数，该函数为this.props.data：

<div>{this.props.data.map((elem) => elem.name})}</div>

这将转换对象数组：

var data = [
        {
            name: "Joe",
            age: 27
        },
        {
            name: "John",
            age: 27
        },
        {
            name: "Bill",
            age: 25
        }
    ];

到name字符串数组：

var data = ["Joe", "John", "Bill"];

反应 - 通过对象数组映射

1 个答案: