为 React useContext 创建动态初始状态

Question

我正在尝试根据上下文中的变量动态初始化上下文，动态变量是一个长度为 N 的空数组，其中 N=size，它是上下文的一部分。

除非在上下文中被覆盖，否则我希望默认大小为 5。

const createArray = (size) =>{
    let myArray = []

    for (let i=0; i<size, i++){
        myArray.push(false);
    }
    return myArray
};


export const initialState = {
    name : "",
    size: 5,
    slotArray : createArray(size),
}

我收到一个错误'size' is not defined

但是，如果我对以下内容进行硬编码，它将正常工作。我做错了什么？

slotArray : createArray(5)

提前致谢

Answer 1

在创建initialState对象时没有定义变量大小。

它在'createArray'箭头函数的范围内可用，因为'size'作为参数传递。

阅读更多关于 JS 作用域和闭包的信息here

回答原来的问题，你会做类似的事情

const createArray = (size) =>{
  let myArray = []
  for (let i=0; i<size, i++){
    myArray.push(false);
  }
  return myArray
};


const MyContext = React.createContext(null);

function parentComponent() {
  const arrLength = null; // Change this dynamically

  return (
     <MyContext.Provider value={arrLength}>
       <h1>This is the Parent Component</h1>
       <ChildComponent />
     </MyContext.Provider>
   );

const getInitialState = (size) => {
  name : "",
  size: 5,
  slotArray : createArray(size),
}

function ChildComponent(props) {
const myDynamicArrLength = React.useContext(MyContext);
const myArr = getInitialState(myDynamicArrLength || 5);

return (<div>
    {myArr.slotArray.map((a)=> a ? <span>true</span>:<span>false</span>)}
  </div>);
}