reactjs - TypeError：this.state.userDtl.map 不是函数

Question

我是反应编码的新手，正在尝试从 api 响应中获取值。

class AdminDashboard extends Component {
    constructor() {
        super()
        this.state = {
            mobile: "",
            userDtl: "",
        }
        this.getDetails = this.getDetails.bind(this)
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    }

    getDetails() {
        console.log("Inside getDetails...")
        Service.getUserByMobileNumber(this.state.mobile)
            .then(
                response => {
                    console.log(response.data)
                    this.setState({
                        userDtl: response.data
                    })

                },
                document.getElementById("userDetails").style.visibility = "visible",
            )
    }

    componentDidMount() {
        document.getElementById("userDetails").style.visibility = "hidden";
    }

    render() {
        return (
            <>
                <br /><br />
                <div className="userdashboard">
                    <h3 className="container"><span><u>Admin Dashboard</u><br /></span></h3>
                    <br />
                    <div className="container">
                        <table>
                            <tr>
                                <td><b>Mobile Number</b>&nbsp;&nbsp;</td>
                                <td><input type="text" name="mobile" value={this.state.mobile} onChange={this.handleChange} placeholder="Enter your mobile number" />&nbsp;</td>
                                <td><button className="btn btn-success" onClick={this.getDetails}>Get Details</button></td>
                            </tr>
                        </table>
                        <br /><br />
                    </div>
                    <div className="container">
                        <div id="userDetails">
                            <>
                                {
                                    this.state.userDtl.map(
                                    userDtl =>
                                        <table>
                                            <tr>
                                                <td><b>Email</b>&nbsp;&nbsp;</td>
                                                <td>{userDtl.email}</td>
                                            </tr>
                                            <tr>
                                                <td><b>Given Name</b>&nbsp;&nbsp;</td>
                                                <td>{userDtl.fName}</td>
                                            </tr>
                                            <tr>
                                                <td><b>Family Name</b>&nbsp;&nbsp;</td>
                                                <td>{userDtl.lName}</td>
                                            </tr>
                                        </table>
                                    )
                                }
                            </>
                        </div>
                </div>
            </>
        )
    }
}
export default AdminDashboard

以下是来自api的响应

{fName: "test", lName: "test1", email: "wer", role: null, mobileNumber: "12342"}

下面是我得到的错误

Uncaught (in promise) TypeError: this.state.userDtl.map is not a function
    at AdminDashboard.render (AdminDashboard.jsx:108)
    at finishClassComponent (react-dom.development.js:17160)

标签： reactjsreact-native

Answer 1

您的初始值userDtl不是数组。你的反应也不是。

您的响应是一个对象，您必须映射一个对象。

我创建了工作代码框。https://codesandbox.io/s/green-sun-ym38o。