错误：对象作为 React 子级无效（找到：object 和键 {rank}）。 如果您打算渲染一组孩子，请改用数组

Question

I have these two files that I want to connect to a node file. search.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);
    }
}

I found a similair error on stackoverflow where they fixed it with {user.map(user => <div>{user.name}</div>)} , but that gives me ReferenceError: user is not defined . For reference, my node file is as follows:

app.get("/rank", async (req,res) => {
    try {
    const name = req.query.name;
    
    const temp = 'SELECT name,time,rank FROM (SELECT name,time, 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) {

    }
})

Basically, I just want the user to have a button where they can enter a name and then search for that name in the database.

Answer 1

You do not have user in your states but you are trying to use it with state features, that's the problem.

Answer 2

You are forming API which returns Object or Array collections:

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

Instead of this.state.user , use this.state.user.rank and access it's data in React Element.