J'ai ces deux fichiers que je souhaite connecter à un fichier de nœud. 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);
    }
}

J'ai trouvé une erreur similaire sur le débordement de pile où ils l'ont corrigée avec {user.map(user => <div>{user.name}</div>)}, mais cela me donne ReferenceError: user is not defined. Pour référence, mon fichier de nœuds est le suivant:

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) {

    }
})

Fondamentalement, je veux juste que l'utilisateur dispose d'un bouton sur lequel il peut entrer un nom, puis rechercher ce nom dans la base de données.

-2
user5491053 24 févr. 2021 à 21:56

2 réponses

Meilleure réponse

Vous créez une API qui renvoie des collections Object ou Array:

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

Au lieu de this.state.user, utilisez this.state.user.rank et accédez à ses données dans React Element.

1
Venkatesh Saiprasath 24 févr. 2021 à 22:13

Vous n'avez pas user dans vos états mais vous essayez de l'utiliser avec des fonctionnalités d'état, c'est le problème.

0
EvrenK 24 févr. 2021 à 18:59