Question

State会在每次重新发布redux时更改回init值并运行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一样访问它，我相信这并不是您想要的。

为什么在redux rerender

1 个答案: