如何使用从mongoDB获取数据的变量，在另一个文件中，我们可以使用存储在该变量中的数据

Question

在另一个react组件中，如何使用存储mongoDB数据的变量，在该组件中，我们可以使用从mongoDB获取并存储在该变量中的数据。

从mongoDB中提取数据并将其存储在名为data的变量中的文件的代码

import React,{useEffect,useState} from 'react'
import './HeroSection.css'
import axios from 'axios'
import {useHistory} from 'react-router-dom';

function Homefilter() {
const [search, setSearch] = useState('');    
const history = useHistory();
const [data,setData] = useState('')



 const Getsearch = () =>{
   console.log(search)
  axios.get('/searchdata',{params: {search}})
    .then(response => {
    setData(response.data.data)
    console.log(response);  
    history.push('/searchdata')
    })
    .catch(error => {
      console.log(error);
    });
  }
  // useEffect(() => {
  //   Getsearch();
  // }, []);


    return (
      <div class='container-fluid'>
      <div style={{height:'350px',alignItems:'center'}} class="row" id='colu' >
        <div class='col-lg-12 col-md-12 col-sm-12'>
        <div style={{justifyContent:'center',alignContent:'center',alignItems:'center',textAlign:'center'}} >
        <input style={{display:'inline',width:'35rem'}} type="text" name="search" class="form-control" placeholder="Enter keyword to search Vehicle" 
       value={search}
        onChange={(e)=>setSearch(e.target.value)}
        />
        <button onClick={Getsearch} class="btn btn-primary">Search</button> 
        </div>
        </div>
      </div>
      </div>
    )

  
  

    
}

export default Homefilter

现在我想在另一个反应组件中使用这个数据变量，这样我就可以显示存储在数据变量中的数据

Answer 1

可以传递数据

<Component data={data}/>

您只需在组件声明中分解相应的prop即可使用它：

function Component({ data }) { 
    console.log(data)
}

如果需要全局传递该状态，而不仅仅是传递给子组件，那么应该使用上下文API。