如何将数据传递到单个组件

Question

有时这会让你想要放弃。看似简单的事情变成了一个大问题。

我正在工作https://rickandmortyapi.com/我使用的是react路由器dom。

我创建了一个所有字符的列表：

import React, { useState, useEffect } from 'react'
// styles
import { Wrapper, CardGrid, Grid, GridInfo } from './Cards.styles'
// API functions
import { getCharacters } from '../../API'
// import Link from react-router-dom
import { Link } from 'react-router-dom'
const Cards = () => {
// state to keep track of the characters
const [characters, setCharacters] = useState([])
// state to keep track of character
const [character, setCharacter] = useState([])
// function to get the characters from the API
const getCharactersFromAPI = async () => {
try {
const response = await getCharacters()
setCharacters(response.results)
return response
} catch (error) {
console.log(error)
}
}
// function to get the single character from the API
// const getCharacterFromAPI = async () => {
//   try {
//     const response = await getCharacter()
//     setCharacter(response.results)
//     return response
//   } catch (error) {
//     console.log(error)
//   }
// }
// useeffect to update the characters
useEffect(() => {
getCharactersFromAPI()
// getCharacterFromAPI()
}, [])
return (
<Wrapper>
<CardGrid>
{characters.map((character) => {
const {
id,
name,
image,
species,
gender,
// destucturing an object inside an array
location,
} = character
return (
<Grid key={id}>
<img src={image} alt={name} />
<GridInfo character={character}>
<Link to={`/character/${id}`}>{name}</Link>
<p className='first'>{species}</p>
<p>{gender}</p>
<p>{location.name}</p>
</GridInfo>
</Grid>
)
})}
</CardGrid>
</Wrapper>
)
}
export default Cards

我的API.js

// get all characters
export const getCharacters = async () => {
return await fetch('https://rickandmortyapi.com/api/character')
.then((response) => response.json())
.then((json) => {
////   console.log(json)
return json
})
}
// Get a single character
export const getCharacter = async (id) => {
return await fetch(`https://rickandmortyapi.com/api/character/${id}`)
.then((response) => response.json())
.then((json) => {
////   console.log(json)
return json
})
}

我创建了一个SingleCharacter组件，根据您的id显示每个字符。

单个字符：

import React from 'react'
import { Wrapper } from './SingleCharacter.styles'
// show single character
const SingleCharacter = ({ character }) => (
<Wrapper>
<h1>Single</h1>
</Wrapper>
)
export default SingleCharacter

我不知道如何使这个组件工作。

Answer 1

在app.js文件中导入单字符

//app.js
<Router>
//other routes
<Route exact path="/character/:characterId" component={SingleCharacter} />
</Router>

在您的SingleCharacter文件中

import {useState,useEffect} from 'react';
import {useParams} from "react-router-dom";
import { Wrapper } from './SingleCharacter.styles'

// show single character
const SingleCharacter=()=>{
const [character,setCharacter]=useState(null);
const {characterId}=useParams();
useEffect(()=>{
fetch(`https://rickandmortyapi.com/api/character/${characterId}`)
.then((response) => response.json())
.then((json) => {
console.log(json);
setCharacter(json);
})
},[])
return(
<Wrapper>
<h1>Single</h1>
</Wrapper>
)
}
export default SingleCharacter