如何将数据从 useSelector 传递给 useState 以防止重新渲染

Question

我想将数据从 redux 传递给 useState，但这会导致多次重新渲染。它是另一种变体吗？

这是我目前正在使用的变体

export default function Test(){
 const dispatch = useDispatch();

 const currentData= useSelector(state => state.currentData);
 const [value, setValue] = React.useState(null);
 
 React.useEffect(() => {
  dispatch(getData());
 },[dispatch]);

 React.useEffect(() => {
  setValue(currentData.item);
 },[data])

 return (
   <Autocomplete
    options={data}
    value={value}
   />
 )
}

谢谢！对不起我的英语

Answer 1

如果您只想存储来自商店的新值而不进行第二次渲染，则可以使用useRef，以防您需要在事件处理程序中保存和读取该值。

如果您只需要 currentData.item 部分只是用于当前渲染，我看不出使用任何钩子的理由，而只是普通的 JS 变量或直接将 currentData.item 传递给您的依赖组件。这是useRef 的样子。

export default function Test(){
 const dispatch = useDispatch();

 const currentData= useSelector(state => state.currentData);
 const value = React.useRef(null);
 value.current = currentData.item;
 
 React.useEffect(() => {
  dispatch(getData());
 },[dispatch]);

 return (
   <Autocomplete
    options={data}
    value={value.current}
   />
 )
}

---

编辑：

基于提供的沙盒，我创建了一个fork。请注意，我在 index.js 中删除了React.StrictMode。这使仅在开发中（按设计）的渲染数量增加了一倍。我还将国家和位置合并到一个状态对象中，所以现在调用 setState 将导致 1 个额外的渲染，而不是像以前那样的 2 个。在 init 上总共渲染了 2 次 - 首先是通常的渲染，第二次渲染是因为在效果中设置了状态。