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个。总共有2个渲染是在init上进行的-首先，通常是一个渲染，然后是第二个渲染，这是因为效果中设置了状态。

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

1 个答案: