在REACT中将一个过滤器变量从一个组件导入到另一个组件

Question

我有这两个组件:

第一个主页'

import {useEffect, useState} from 'react';
import Navbar from "./navbar";
import Modal from "./Modal";
import '../styles/home.css'
import FavoriteCrypto from "./favoriteCrypto";
export default function MainPage() {
const[data, setData] = useState([])
const[input, setInput] = useState("");
const [openModal, setOpenModal] = useState(false)
const [modalArr, setModalArr] = useState([])
const[favorites, setFavorites] = useState([])
const url = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false"
useEffect(()=>{
fetch(url)
.then((res)=>{
return res.json()
})
.then((data)=>{
setData(data)
})
},[])
let searchBar =  data.filter((e)=>{
return e.id.toLowerCase().includes(input.toLowerCase())
})
// add to favorite
function addToFav(id){
if(!favorites.includes(id)){
setFavorites(favorites.concat(id))
}
}



function openModalFunc(id) {
setOpenModal(true);
if(!modalArr.includes(id)) {
setModalArr(modalArr.concat(id))
}
}
function closeModalFunc(id) {
setOpenModal(false);
setModalArr([]);
}

let modalRender = data.filter(data => modalArr.includes(data.id));
let favoriteRender = data.filter(data =>  favorites.includes(data.id))

console.log(favoriteRender)

return(
<div>
<Navbar input={input} setInput={setInput}/>
<div className='general-info'>
<h4>Coin</h4>
<h4 className='p'>Price</h4>
<h4 className='c'>Change</h4>
<h4 className='mc'>Market Cap</h4>
<h4 className='s'>Supply</h4>
</div>
<Modal addFavorite = {addToFav} modalArr={modalRender}   close = {closeModalFunc}  open = {openModal}/>
{searchBar.map((e)=>(
<div
onClick={()=>{
openModalFunc(e.id);
}}
className='all_coins_wrapper'>
<div className='coins-wrapper'>
<div className='coins-label'>
<img src={e.image} alt=""/>
<div className='general_info'>
<div>{e.name}</div>
<div>{e.symbol.toUpperCase()}</div>
</div>
</div>
<p className='price-main'>${e.current_price}</p>
</div>
<div className='left-part'>
<p className='change'>{e.price_change_percentage_24h}</p>
<div className='marcap'>{e.market_cap}</div>
<div className='circ'>{e.circulating_supply}</div>
</div>
</div>
)
)}
</div>
)
}

第二个:'

import React from "react";
import Navbar from "./navbar";
import MainPage from "./home";
export default function FavoriteCrypto({favorite}){

return(
<div>
</div>
)
}

我想导入这些变量'

let favoriteRender = data.filter(data =>  favorites.includes(data.id))

从第一个组件到第二个组件，以便在第二页显示最喜欢的硬币'

我试图复制粘贴代码从第一个组件到第二个组件，并导入变量，但没有工作。我使用react一个星期了。抱歉，如果这个问题已经问过了。但是我不能解决这个问题。

Answer 1

为了在组件之间传递数据，您不需要导出该变量。你可以使用props来实现。

这是文档的链接。

下面是这样做的一个例子:

// COMPONENT
const MyNameComponent = (props) => <h1>{props.name}</h1>;
// USAGE
const App = () => {
const name = "John Doe";
return <MyNameComponent name={name} />
}

作为你的问题的解决方案可以是:

<FavoriteCrypto favourite={favouriteRender} />

，并在组件中使用它来显示它。您可以根据自己的意愿排列数据。阅读文档获取更多信息👍.