错误：对象作为 React 子对象无效找到：键为 {rank} 的对象如果您打算渲染一组子项，请改用数组

如何解决错误：对象作为 React 子对象无效找到：键为 {rank} 的对象如果您打算渲染一组子项，请改用数组

我有这两个文件要连接到节点文件。 搜索.js

import React from "react";
import { getInfo } from "../lib/utilSearch.js";

export default class Search extends React.Component {
    constructor(props) {
        super(props);
        this.state = {search:""};
    }

    handleUpdate(evt) {
    this.setState({search: evt.target.value});
    }

    async handleSearch(evt) {
        const user = await getInfo(this.state.search);
        // console.log(user);
        this.setState({user});
    }

    render() {
        return (
            <div>
            <h3 className="text">Enter a name below to search for it and see your rank!</h3>
            <p><input type='text' value={this.state.search} onChange={this.handleUpdate.bind(this)} /></p>
            <button className='button-style' onClick={this.handleSearch.bind(this)}>Search</button>
            {this.state.user ? <div>
                <p>{this.state.user} </p>
            </div> : null}
            </div>
        )
    }
}

utilSearch.js

require("isomorphic-fetch");

function getCuber(time) {
    return fetch('http://localhost:3001/rank?q=${time}').then(function(resp) {
        return resp.json();
    });
}

function handleError(error) {
    return null;
}

module.exports = {
    getInfo: function(time) {
        return getCuber(time).catch(handleError);
    }
}

我在 stackoverflow 上发现了一个类似的错误，他们用 {user.map(user => <div>{user.name}</div>)} 修复了它，但这给了我 ReferenceError: user is not defined。供参考，我的节点文件如下：

app.get("/rank",async (req,res) => {
    try {
    const name = req.query.name;
    
    const temp = 'SELECT name,time,rank FROM (SELECT name,RANK() OVER (ORDER BY time ASC) rank FROM times) t WHERE name=$1';
    const resp = await pool.query(temp,[name]);
    res.json({rank: resp.rows});
    } catch (err) {

    }
})

基本上，我只希望用户有一个按钮，他们可以在其中输入名称，然后在数据库中搜索该名称。

解决方法

您的州中没有 user，但您试图将其与州功能一起使用，这就是问题所在。

,

您正在形成返回对象或数组集合的 API：

res.json({rank: resp.rows});

使用 this.state.user 代替 this.state.user.rank 并在 React Element 中访问它的数据。