如何使useState的初始值依赖于道具
我检查了一些其他的答案，但问题的范围不同。
这是我的react应用程序文件的情况
Slist.js
const Slist = (props) => {
let [st, updateSt] = useState[[props.arr[0], props.arr[1]]];
console.log(st);
.
.Dlist.js
let arr = [1,2,3,4]
...
// arr is updated to [5,6,7,8] and after that a state setter function is called
...
<Slist arr={arr} />在初始负载中，Slist.js中没有问题。
由于单击按钮而导致Dlist.js的状态更改，它将重新呈现。现在，Slist也重新呈现，但st 中的初始值未更新为新的arr值。
我认为这是因为状态变量不受重呈现的影响，因为它们通常是导致重呈现的原因(但在这里，它是由父组件造成的)。
所需的功能是，当重新呈现是由于父组件，它作为一个新的安装，而不是重新呈现，因此再次弱化st变量。
任何解决办法。
回答 1
Stack Overflow用户
发布于 2022-10-19 05:31:55
所需的功能是，当重新呈现是由于父组件，它作为一个新的安装而不是重新呈现，因此再次初始化st状态变量。
给予：<Slist arr={arr} />
它通常被认为是一种反应反模式，用于复制和存储传递到局部组件状态的道具，从而导致可能出现的问题，如陈旧状态。您应该直接在组件中引用传递的arr支柱。
const Slist = ({ arr }) => {
cont st = arr.slice(0, 2); // [1,2], or later [5,6], etc...
...
};如果绝对必须在本地状态复制arr支柱，并且在组件的生命周期中可能会发生更改，那么该组件应该使用useEffect挂钩来“同步”本地状态。
const Slist = ({ arr }) => {
const [st, setSt] = useState(arr.slice(0, 2)); // first two elements
useEffect(() => {
setSt(arr.slice(0, 2));
}, [arr]);
...
};或者，您可以为Slist组件提供一个React键，以便当arr数组值更新时，Slist组件将重新装入。
示例：
<Slist
arr={arr}
key={JSON.stringify(arr)} // "[1,2,3,4]", and later "[5,6,7,8]", etc...
/>这是您最接近的要求“新安装”，但TBH这是有点不必要的选项提供以上。重命名组件比拆卸和重新挂载组件要少，特别是考虑到您无论如何都要做这些工作来提取传递的arr数组的前两个元素。
https://stackoverflow.com/questions/74101656
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号