Question

您好，我正在尝试将一些数据传递给我的子组件（实际上是来自数据库的数据）。在我的父组件中，当我 console.log 时，我可以看到我的数据，但我想在我的子组件中显示它它给了我一个错误有什么建议吗？这是我的代码

这不是父母的完整代码，但我认为这是您需要看到的

我的父组件

import React, { useState, useEffect } from "react";
import './Inscription.css';
import Axios from 'axios';
import Adherents from "./Adherents";

function Inscription (){
   
   const [Nom, setNom] = useState("");
   const [Email, setEmail] = useState("");
   const [Profession, setProfession] = useState("");
   const [Date_naiss, setDate_naiss] = useState(0);
   const [Tel, setTel] = useState(0);
   const [Date_adhession, setDate_adhession] = useState(0);
   const [formData, setformData] = useState("")

   const [Info,getInfo] = useState([])
  
   
   const addAdherent = () =>{

      Axios.post('http://localhost:3005/create',{
        Nom: Nom,
        Email: Email,
        Profession: Profession,
        Date_naiss: Date_naiss,
        Tel: Tel,
        Date_adhession: Date_adhession,
        formData:formData,

      }).then(()=>{
        console.log("success");
      })
    }

    useEffect(() => {
      getAllInfo();
    }, []);


    const getAllInfo = (props) =>{
       Axios.get('http://localhost:3005/adherents')
       .then((response) => {
          console.log(response.data)
         getInfo(response.data)
       })
       .catch(error => console.log("error"))

    }

    return(
        

        <div className= "Inscription">
          <Adherents data={Info}/>  
        </div>

我的 index.js

const express = require("express");
const app = express();
const mysql = require('mysql2');
const cors = require('cors');

app.use(cors());
app.use(express.json());

const db = mysql.createConnection({
  user: 'root',
  host: 'localhost',
  password: 'obincharity',
  database: 'adherents_system',
  port: '3306',

});


app.get('/adherents', (req,res) => {
  db.query("SELECT * FROM new_table", (err, result) => {
    if (err){
      console.log(err);
    }else{
      res.send(result);
    }
  });
});
    
app.listen(3005, () =>{
  console.log("server working");
  });

我的子组件

import React from 'react'

export default function Adherents(props) {
    const getAllInfo  = ()=>{
        const {menu,data} = props;
        if(data.length > 0){
            return(
                data.map((data, index) =>{
                    console.log(data);
                   
                   return(
                    <div className = "Data" key={data.Nom}>
                    <h3 className = "MainName"> {data.Nom} </h3>
                    <h4 className = "MainTel"> {data.Telephone} </h4>
                    <h4 className = "MainEmail"> {data.Email} </h4>
                    <span className="Info_fadeOut"></span>
                    </div>
                   )
                })
                
            )
        }else{
            return(<h3>No notes yet</h3>)
        }
    }
    return(
         
        <>
           {getAllInfo (props)}
        </>
    )
    }

这是它在我的浏览器中显示的错误

TypeError: Cannot read property 'length' of undefined
getAllInfo
C:/Users/HP/Documents/Mutcav/client/src/Adherents.js:6
  3 | export default function Adherents(props) {
  4 |     const getAllInfo  = ()=>{
  5 |         const {menu,data} = props;
> 6 |         if(data.length > 0){
  7 |             return(
  8 |                 data.map((data, index) =>{
  9 |                     console.log(props);
View compiled
Adherents
C:/Users/HP/Documents/Mutcav/client/src/Adherents.js:28
  25 | }
  26 | return(
  27 |      
> 28 |     <>
     | ^  29 |        {getAllInfo (props)}
  30 |     </>
  31 | )

Answer 1

问题最初是没有 data。试试下面：

if(Array.isArray(data) && data.length > 0){
     ....
}

Answer 2

在子组件中而不是：

SELECT (
    SELECT V.* FROM ClassPerson CP
        INNER JOIN PersonActive PA ON(CONVERT(nvarchar(128),PA.PersonActiveId) = @usrGuid AND CP.PersonId = PA.personId)
        INNER JOIN ClassPerson CP2 ON(CP2.classId = CP.ClassId)
        INNER JOIN V_Student V ON(V.PersonId = CP2.PersonId)
        FOR JSON PATH, ROOT('AllRecord')
);
-- alternatively
DECLARE @json nvarchar(max) = (
    SELECT V.* FROM ClassPerson CP
        INNER JOIN PersonActive PA ON(CONVERT(nvarchar(128),PA.PersonActiveId) = @usrGuid AND CP.PersonId = PA.personId)
        INNER JOIN ClassPerson CP2 ON(CP2.classId = CP.ClassId)
        INNER JOIN V_Student V ON(V.PersonId = CP2.PersonId)
        FOR JSON PATH, ROOT('AllRecord')
);

SELECT @json;

试试：

import React from 'react'

export default function Adherents({menu, data}) {
    const getAllInfo  = ()=>{
        if(data.length > 0){
            return(
                data.map((data, index) =>{
                    console.log(data);
                   
                   return(
                    <div className = "Data" key={data.Nom}>
                    <h3 className = "MainName"> {data.Nom} </h3>
                    <h4 className = "MainTel"> {data.Telephone} </h4>
                    <h4 className = "MainEmail"> {data.Email} </h4>
                    <span className="Info_fadeOut"></span>
                    </div>
                   )
                })
                
            )
        }else{
            return(<h3>No notes yet</h3>)
        }
    }
    return(
         
        <>
           {getAllInfo (props)}
        </>
    )
    }

Answer 3

使用可选链接。 if(data?.length > 0)

试试这个

if(data?.length > 0){
  return(
    data.map((data, index) =>{
      console.log(data);
                   
      return(
        <div className = "Data" key={data.Nom}>
          <h3 className = "MainName"> {data.Nom} </h3>
          <h4 className = "MainTel"> {data.Telephone} </h4>
          <h4 className = "MainEmail"> {data.Email} </h4>
          <span className="Info_fadeOut"></span>
        </div>
      )
    })              
  )
} else {
  return(<h3>No notes yet</h3>)
}

将 props 从父组件传递给子组件

3 个答案: