Question

好吧，基本上，我从昨天开始就试图了解.map并没有得到定义。我试图进入 area_set 的 name 属性。
我将在尝试访问的 this.state.model 的console.log下面写下：

{
    "id": 1,
    "brand": {...},
    "couchmodelfile_set": [...],
    "area_set": [
        {
            "id": 6,
            "couch_model": 1,
            "name": "Area 1",
            "dimensions_price": [
                {
                    "dimensions": "96",
                    "seat": 54,
                    "arm": 21,
                    "price_table_code": "table_1",
                    "prices": []
                },
                {
                    id: 7, ...
                }...
        }
    ]
}

现在，这是我的render方法中的代码：

export class Sofa extends React.Component {

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

componentDidMount() {

    /* Fetch to get token from API */

    fetch(url + '/couch-model/1/', {
        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({
            model: json
        }, () => {
            console.log('model: ', json);
        });
    })

}


render() {

    const { model, isLoaded } = this.state;

    if (!isLoaded) {

        return (
            <div id="LoadText">
                Estamos a preparar o seu sofá!
            </div>
        )

    } else {

        return (
                    <div id="Esquerda">

                        <h2>{/* show area_set */}</h2>

                        <h1>{model.name}</h1>
                        <p>Highly durable full-grain leather which is soft and has  a natural look and feel.</p>

                        <h3>Design</h3>
                        <h4>Hexagon</h4>
                    </div>
        );

    }

  }

}

顺便说一句，上面代码中的.map无法正常工作... 我真的需要一些帮助，以摆脱这个：（

Answer 1

您指出模型在构造上为空。在ajax请求结束之前，该render方法被称为，因此render方法正在尝试访问一个空模型。

您可以通过两种方式防止它。要检查模型是否为空并渲染其他东西，或在加载ajax请求时使用有效的模型填充状态。

编辑：现在，只需在ajax结束时将isLoaded设置为true连同模型。

Answer 2

在对象定义中有：

"area_set": [...]

您正在尝试访问

{model.layout_set.map

将其更改为area_set.map（....），它应该可以工作;）

Answer 3

请尝试以下方法。您需要检查渲染方法上的状态（模态）是否为空，以确保map

的正常工作

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal:[]

    };
  }

  render() {
    const  {modal}  = this.state;
    return (
      {modal ?
      <div id="Esquerda">
        {modal.area_set.map(layout =>
        <div>
          <h2>{layout.id}</h2>
          <h1>{layout.name}</h1>
          </div>
        )}

        <p>Highly durable full-grain leather which is soft and has  a natural look and feel.</p>
        <h3>Design</h3>
        <h4>Hexagon</h4>
      </div>
      :<div>No data</div>}
    );
  }
}

TypeError：无法读取未定义的属性“ map”（React.js）

3 个答案: