Question

import React, { Component } from 'react';

class newsList extends React.Component {

    render(){

        return(
            <div>
                {JSON.stringify(this.props.arr)}
            </div>
        )
    }

}

export default newsList;

在上面的代码中，arr是来自另一个组件的对象。我可以使用JSON.stringify(this.props.arr.result)显示数据。但是，只要我使用JSON.stringify(this.props.arr.result.id)进行更改，我就会收到错误TypeError: this.props.arr.result is undefined。我无法理解我在这里做错了什么？

Answer 1

我几乎肯定，在某个时间点，您的<form parameters="values..."> <input type="file" id="file"/> </form> <script> $(document).ready(function () { $("#file").on("change", function () { let input = this; if(input.files && input.files[0]) { //upload }else { alert("Error: Incompatible browser"); } }); }); </script>是this.props.arr，但最终会被分配一个值。您的初始渲染将收到undefined或null，但如果您尝试进一步进入不存在的密钥，则会抛出该错误。您可以使用布尔值来控制最初呈现的内容。

而不是这行代码：

undefined

试试这个：

{JSON.stringify(this.props.arr)}

编辑：你的问题是{this.props.arr ? JSON.stringify(this.props.arr) : null}吗？如果是这样，请改用

this.props.arr.result.id

Answer 2

请尝试使用此代码：

class NewsList extends React.Component {
    constructor(props) {
        super(props);
        this.props = props;
    }
    render() {
        return <div>{this.props.arr}</div>;
    }
}

React.Component constructor始终收到props作为其第一个参数。

Answer 3

是this.props.arr数组吗？如果是，则渲染功能应为

render(){
    var ids = this.props.arr.map(e=>(<div>e.result.id</div>))
    return(
        <div>
            {ids}
        </div>
    )
}

如何访问react组件中的props？

3 个答案: