Question

我仍然对ReactJs中的.map感到困惑，每次尝试使用它时，都会得到 .map undefined 。我需要遍历一个数组，该数组是从如下图所示的API提取的结果：

Array(20)
    0:
        couch_model: 1
        couchmodelextralayout_set: (4) [{…}, {…}, {…}, {…}]
        created_on: "date"
        dimensions_3D: "309cm D: 28.5cm H: 84cm"
        dimensions_price: Array(3)
            0:
                arm: 28.5
                dimensions: "331.5"
                price_table_code: "table_1"
                prices: Array(5)
                    0:
                        final_price: 0
                        texture_type: "Diamante"
                    1: {…},
                    2: {…},
                    3: {…},
                    4: {…}

基本上是这样：

这是我的实际代码：

export class Material extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoaded: false,
            textures: {}
        };
    }

    componentDidMount() {
        const email = email;
        const pass = pass;
        const url = url;

        /* Here is fetch to get token */

        fetch(url + '/layout/?limit=20', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'Authorization': 'JWT ' + (JSON.parse(localStorage.getItem('token')).token)
            }
        }).then(res => {
            if (res.ok) {
                return res.json();
            } else {
                throw Error(res.statusText);
            }
        }).then(json => {
            this.setState({
                textures: json
            }, () => {
                console.log('textures: ', json);
            });
        })

    }



    render() {

        const { isLoaded, textures } = this.state;


        if (!isLoaded) {

            return (
                <div>{/*nothing*/}</div>
            )

        } else {

            return (
                <div>
                {/*
                    This is where I want the texture to appear
                */}
                </div>
            );

        }
    }
}

基本上，我想在不同的<p>标签中显示所有纹理，但是我不知道如何访问数组...有什么建议吗？

Answer 1

如果获取（textures）的结果实际上是一个数组，则.map函数应该正常工作。问题可能出在构造函数中的state.textures声明：将其初始化为对象。通过执行此操作，组件的第一个渲染尝试将.map映射到空对象上。

尝试将其初始化为这样的数组

this.state = {
    isLoaded: false,
    textures: []
};

编辑：

在获取的最后一部分中，您需要引用json.results的简单json，它是包含结果数组的对象

.then(json => {
    this.setState({
        textures: json.results
    }, () => {
        console.log('textures: ', json);
    });
 })

如果您希望将整个对象保持在您的状态，

您可以使用相同的方法初始化状态：

this.state = {
    isLoaded: false,
    textures: {}
};

保留提取的最后一部分：

this.setState({
  textures: json
}

然后在渲染器中映射这样的结果：

const { isLoaded, textures } = this.state;

return(
      {
        textures.results.map(result=>(
           ...
        ))
      }
)

运行数组以在React.js中获取texture_type

1 个答案:

如果您希望将整个对象保持在您的状态，