Javascript 在渲染之间不会更新状态的默认值

考虑下面的例子。我正在从子对象调用父对象中的获取函数

请求完成后，我将数据从异步请求传递给我的

Child

as

items

prop。Im将其设置为

useState

-

React.useState（项目）的默认值

预期行为：请求完成，
items
更新，
Child
获取新道具，重新呈现，并更新
useState
中的默认值。因此
a
变量保存正确的对象

实际行为：
useState
中的默认值在渲染之间不会更新。为什么?


constchild=（{fn，items}）=>{
常量[a，b]=React.useState（项目）；
console.log（a，items）；//a为null，但items是对象
React.useffect（（）=>{
fn（）；
}, []);
返回JSON.stringify（a）；
}
常量应用=（）=>{
const[stateOne，setStateOne]=React.useState（null）；
常数fn=（）=>{
取（'https://jsonplaceholder.typicode.com/todos/1')
.then（response=>response.json（））
。然后（json=>{
setStateOne（json）；
});
}
console.log（stateOne）
回来
}
render（，document.getElementById（“根”））
您误解了React钩子中“默认值”的含义。与其说是“默认值”，不如说是“初始值”

考虑以下代码：

let n = Math.random();
const [myN, setMyN] = useState(n);

console.log(n) // This number will always be the same between renders

在您的情况下，初始值是
null
。除非你打电话给设定者，否则它永远不会改变

如果您希望传递道具，请不要将其混入状态。
默认值仅在组件安装时使用。这就是“默认”的意思。在此之后，更改状态的唯一方法是调用statesetter函数（
b
）

很少需要将道具复制到状态，因此可能的解决方法是完全删除状态，然后使用道具

const Child = ({ fn, items }) => {
  React.useEffect(() => {
    fn();
  }, []);

  return JSON.stringify(items);
}

如果您需要某种状态，首先考虑是否可以将该状态移到父级，从而消除此问题。如果出于某种原因，您也不能这样做，那么您需要让子实现逻辑在您希望调用状态设置器时调用它。例如：
const Child = ({ fn, items }) => {
  const [a, b] = React.useState(items);

  React.useEffect(() => {
    b(items);
  }, [items]);
  
  React.useEffect(() => {
    fn();
  }, []);

  return JSON.stringify(a);
}

fetch（）
是异步的<代码>控制台（）。所以，
fetch（）；console.log（fetchresults），几乎总是空的，除非您的网络是FTL。@Holdoff谢谢，但本例中不是这样。请更正命名约定
const[a，setA]=React.useState（items）因此，一旦安装组件，它将永远不会更改，除非卸载组件并再次安装，是吗？是的，当组件安装时，默认值将仅使用一次。如果卸载并重新装载，则会得到一个新元素，该新元素将使用其默认值（可能与旧元素的默认值不同）。