如何将数据从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-first上，通常是一个和第二个，因为在效果中设置了状态。