为什么在 redux 重新渲染时状态总是变回 init 值

Question

状态会变回初始化值，每次 redux 重新渲染时都会运行 useEffect。 它看起来像在 Redux 状态更改后重新挂载组件。

控制台打印问候两次，当我输入一些文本并单击搜索按钮时，输入框变为空。

import React, {useEffect, useState} from "react";
import Button from "react-bootstrap/es/Button";
import fetch from "cross-fetch";
import actions from "@/actions";
import api from "@/api";
import {useDispatch} from "react-redux";

const getData = (title, page) => dispatch => {
dispatch(actions.notice.loading());
return fetch(api.notice.list({title, page}), {method: 'POST'})
.then(response => response.json())
.then(resultBean => {
dispatch(actions.notice.success(resultBean.data.list))
}).catch(error => {
dispatch(actions.notice.failure(error));
});
};
const View = _ => {
const [title, setTitle] = useState('');
const dispatch = useDispatch();
useEffect(() => {
console.log('hello');
dispatch(getData(title, 1))
}, []);
return (
<>
<input onChange={e => setTitle(e.target.value)} value={title} type="text"/>
<Button onClick={e => dispatch(getData(title, 1))}>Search</Button>
</>
)
};

export default View;

Answer 1

您没有显示完整的逻辑，以防dispatch操作并触发View父级进行渲染，View可能会根据其父级的状况重新渲染甚至卸载。

为了View不重新渲染，你需要记住它：

// default is shallow comparison
export default React.memo(View); 

要使View不卸载，请检查其父逻辑。

另外，请注意，在const View = _ =>使用_仍然允许您像_.value一样访问它，我认为这不是您的意图。