我正在使用 react-router-dom 导航到电影详细信息页面。在路上我指出
pathname: `/about/${value.title}`, // {value.title} это название фильма, его я получаю через API.
但是当电影标题中有空格时，在地址栏中用百分号和数字20代替，例如（http://localhost:8080/about/Jojo%20Rabbit，电影的原始标题是“乔乔兔”）。我该如何解决这个问题或对此做些什么？
路线
<Switch>
<Route path="/about/:name" children={<ChooseFilm />} />
</Switch>
谢谢！
我有一个表格，其中写了页数的名称，然后我在LocalStorage中单独记录了页数。然后他不应该接受和总结它们。但是我从 LocalStorage 得到用逗号分隔的页数。我怎样才能将它们分开和求和。
我写到 LocalStorage 的代码
addBook=async(name,count)=>{
let bookInfo = {};
bookInfo["name"] = name;
bookInfo["count"] = count;
await this.setState({
booksList: [...this.state.booksList,bookInfo],
nameValue: "",
countValue: 0,
booksPages: [...this.state.booksPages,count]
})
localStorage.setItem("booksList",JSON.stringify(this.state.booksList));
localStorage.setItem("booksPages",(this.state.booksPages));
}
我从 LocalStorage 获取的代码
componentDidMount(){
const booksList = localStorage.getItem('booksList');
const booksPages = localStorage.getItem('booksPages');
console.log("booksPages",booksPages)
if(booksList){
const savedList = JSON.parse(booksList);
this.setState({
booksList : savedList,
booksPages: booksPages
})
}else{
console.log("No list")
}
}
例如我输入测试 100 测试 100
我进入书籍页面 100,100 我该如何解决这个问题
谢谢
我有一个正在迭代的 API，我需要将接收到的对象写入一个数组以便稍后对其进行排序，但我不能将所有对象写入数组，只写入最后一个。但是我得到了最后一个写入这个状态的对象
我在其中迭代 API 的操作
import {ADD_POKEMONS} from "./actionTypes";
export function getPokemons(listEachPokemon){
return{
type: ADD_POKEMONS,
listEachPokemon
}
}
export function fetchPokemons(url){
return (dispatch) =>{
fetch(url)
.then((response) => {
return response.json();
})
.then((listPokemons)=>{
listPokemons.results.forEach((aboutPokemon) => {
let aboutPokemonUrl = aboutPokemon.url;
fetch(aboutPokemonUrl)
.then((response) => {
return response.json();
})
.then((listEachPokemon) => {
dispatch(getPokemons(listEachPokemon))
})
})
})
}
}
减速器
import { ADD_POKEMONS } from "../Action/actionTypes";
const initialState ={
pokemonList: []
}
export default function listPokemons(state = initialState, action){
switch(action.type){
case ADD_POKEMONS:
return{
...state, pokemonList: action.listEachPokemon
}
default:
return state
}
}
谢谢
我有一个关联数组，我对其进行迭代并显示数据。当我点击一个产品时，如何让它出现在列表的首位？
数组组件
class ProductList extends React.Component {
constructor(props){
super(props);
this.state = {
productList:[
{
name: "test",
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam non incidunt unde et deserunt cum dolorem neque excepturi quae voluptate quas, pariatur omnis ex nesciunt voluptatibus corrupti saepe ducimus repudiandae?",
price: 100,
id: 1
},
{
name: "test",
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam non incidunt unde et deserunt cum dolorem neque excepturi quae voluptate quas, pariatur omnis ex nesciunt voluptatibus corrupti saepe ducimus repudiandae?",
price: 100,
id: 2
},
{
name: "test",
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam non incidunt unde et deserunt cum dolorem neque excepturi quae voluptate quas, pariatur omnis ex nesciunt voluptatibus corrupti saepe ducimus repudiandae?",
price: 100,
id: 3
}
]
}
}
render() {
return (
<div className="">
<ProductCard
productList={this.state.productList}
/>
</div>
);
}
}
多谢
我有这段代码，它给出了我迭代的 12 个对象
class PokemonList extends React.Component{
constructor(props){
super(props);
this.state = {
pokemonList: [],
apiTemplateUrl: "https://pokeapi.co/api/v2/pokemon?offset={number}&limit=12"
}
this.loadMore()
}
loadMore=()=>{
let num = 0;
let apiTemplateUrl = this.state.apiTemplateUrl;
let apiUrl = apiTemplateUrl.replace("{number}",num)
fetch('https://pokeapi.co/api/v2/pokemon?offset=0&limit=12')
.then((response) => {
return response.json();
})
.then((listPokemons) => {
listPokemons.results.forEach((aboutPokemon) => {
let aboutPokemonUrl = aboutPokemon.url;
fetch(aboutPokemonUrl)
.then((response) => {
return response.json();
})
.then((pokeData) => {
this.setState(prevState => ({
pokemonList: [...prevState.pokemonList, pokeData]
}))
})
})
})
}
带有加载更多按钮的组件
render() {
return (
<div className="load-more">
<button onClick={()=>this.props.loadMore()}>Load More</button>
</div>
);
}
为了让我看到下一个 12，我需要在这里用 12 替换 0 并更改 fetch https://pokeapi.co/api/v2/pokemon?offset=0&limit=12
但是我该如何正确地做
在反应中,我从 API 获取图像,我需要将其作为背景图像。我可以以某种方式将它传递给 css 还是有其他方法可以做到这一点？像这样尝试过<div className="" style={{background-image: {this.props.filmPoster}}}>，但它不起作用。
我需要单击带有电影的卡片才能转到包含有关该电影的更多详细信息的页面。我应该如何正确地传递道具，然后在关于页面上将它们拉出来。
jsx
import React from "react";
import './homepage.scss';
import { Link } from "react-router-dom";
class Homepage extends React.Component{
constructor(props){
super(props);
this.state = {
"results" : []
}
this.getRate();
}
getRate = () =>{
fetch("https://api.themoviedb.org/3/movie/popular?api_key=6f7c9fe2b5229b4b0b6dbe66fed3ef18&language=en-US&page=1")
.then(films => {
return films.json();
})
.then(films => {
this.setState({results: films.results});
});
}
render(){
return(
<div className='homepage'>
{this.state.results.map((value, index)=>{
return(
<Link to="/about" key={index}>
<div className="filmCard" >
<div className="desc">
<h4>{value.title}</h4>
<p>{value.overview}</p>
<span>{value.release_date}</span>
</div>
</div>
</Link>
)
})}
</div>
);
}
}
export default Homepage;
多谢