reactjs - 使用调度时,结果在反应中打印两次
问题描述
这更像是一个好奇的问题,我觉得知道为什么会很有用,但是任何人都可以解释为什么 console.log(recipe) 打印两次。当我单击搜索按钮时,结果会在控制台中打印两次。我认为我与重新渲染组件两次反应有关,可以详细解释一下。
function Search(props) {
const recipe = useSelector(state => state.recipe)
const dispatch = useDispatch()
const [query, setQuery] = useState("")
console.log(recipe)
const handleQuery = (event) => {
event.preventDefault();
console.log(`Query: ${query}`)
dispatch(fetchRequest(query))
}
return (
<form className={classes.Search} onSubmit={handleQuery}>
<input
className={classes.Search__field}
placeholder="Search over 1,000,000 recipes..."
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<button className={[buttonClasses.Btn, "search__btn"].join(' ')} type="submit"
>
<svg className={"search__icon"}>
<use href={magnifyingGlass + "#icon-magnifying-glass"}></use>
</svg>
<span>Search</span>
</button>
</form>
);
}
export default Search;
这是使用搜索组件的地方
import React from 'react';
import Search from './Search/Search';
import classes from './Header.module.css';
import logo from '../../img/logo.png';
import Likes from '../Header/Likes/Likes';
const header = (props) => {
return (
<header className={classes.Header}>
<img src={logo} alt="Logo" className={classes.Header__logo} />
<Search />
<Likes />
</header>
)
}
export default header;
然后在 App.js 中的 Layout 函数中使用 Header 函数
import React, { Component } from 'react';
import Aux from '../../hoc/Aux';
import classes from './Layout.module.css';
import Header from '../Header/Header';
import Results from '../Results/Results';
class Layout extends Component {
render() {
return (
<Aux>
<Header />
<Results />
</Aux>
);
}
}
export default Layout;
这是redux动作
import axios from 'axios';
const FETCH_REQUEST = 'FETCH_USERS_REQUEST'
export const fetchRecipe = (recipe) => {
return {
type: FETCH_REQUEST,
payload: recipe
}
}
export const fetchRequest = (query) => {
console.log(query)
return (dispatch) => {
axios(`https://forkify-api.herokuapp.com/api/search?q=${query}`)
.then(response => {
// console.log(response.data.recipes)
const recipe = response.data.recipes;
dispatch(fetchRecipe(recipe));
})
.catch(error => {
console.log(error)
})
}
}
解决方案
Ciao,我不是反应的最高专家,但你可以做一个测试。您知道useEffect
每次重新渲染组件时都会触发挂钩。所以你可以把你的 console.log 放在 useEffect 中,看看是否会被记录两次。就像是:
useEffect(() => {
console.log(recipe);
})
如果您有 2 个日志,则意味着该Search
组件被渲染了两次。否则可能与 reactjs 工作流程有关,正如我所说,我不是那么专家来解释为什么记录两次。
推荐阅读
- node.js - MEAN 堆栈 mongoDB 示例(猫鼬)
- matlab - 使用 Matlab 读取 GNU Radio 二进制文件进行后处理
- typescript - 升级到 Knockout.js 3.5.0 后,Computed 不可分配给 Observable
- wordpress - Wordpress 不符合速度标准
- null - 为什么 trim(" ") == "" 在 Fortran 中返回 false?
- django-rest-framework - 'QuerySet' 对象在 Model Serializer django rest 中没有属性'phone'
- typescript - Typescript:合并 sequelize-typescipt 的 IFindOptions
- javascript - jQuery Datatables 自定义过滤不适用于所有表
- tensorflow - tf 根据差分函数的当前梯度覆盖梯度
- google-api - 如何使用 JWT 访问 Google Androidpublisher API?