У меня есть эти два файла, которые я хочу подключить к файлу узла. 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);
    }
}

Я обнаружил аналогичную ошибку при переполнении стека, где они исправили ее с помощью {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,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) {

    }
})

По сути, я просто хочу, чтобы у пользователя была кнопка, где он может ввести имя, а затем искать это имя в базе данных.

-2
user5491053 24 Фев 2021 в 21:56

2 ответа

Лучший ответ

Вы формируете API, который возвращает коллекции объектов или массивов:

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

Вместо this.state.user используйте this.state.user.rank и получите доступ к его данным в React Element.

1
Venkatesh Saiprasath 24 Фев 2021 в 22:13

У вас нет user в ваших состояниях, но вы пытаетесь использовать его с функциями состояния, вот в чем проблема.

0
EvrenK 24 Фев 2021 в 18:59