Javascript 反应挂钩状态不更新

我正在创建一个react组件（子组件），它将JSON/对象数组作为输入（来自父组件）作为道具

Json看起来像这样

const inputFields = [
  {
    key: 'name', 
    type: 'text', 
    label: `Your Full Name`,
    helper: 'Using your real name would make it more likely for you to get a match',
    templateOptions: { 
      placeHolder: 'Frank Murphy',
      templateStyle: styles.textStyle // refer to the style component
    }
  }, 
  {
    key: 'dob', 
    type: 'dateTyper', //change this to Dob component
    label: 'Your Date of birth',
    helper: 'Your Birthdate will help us in connecting you with people of similar age',
    required: true
  }]

 <TouchableOpacity 
   onPress={getValueFromState}
    disabled={mainButtonState}
    > 
    <Text> {usedButtonText} </Text> 
  </TouchableOpacity>

在我的子组件中，我正在渲染它。在此对象数组中，请注意第二个对象中需要一个键

required:true

现在，在我的子组件中，我有touchableOpacity，我根据这个状态启用/禁用它。这是我的孩子组件的大致结构

export const Component = (props) => {
  const { inputFields } = props
  const [index, setIndex] = useState(0)
  const currentComponent = inputFields[index]
  const {key, type, label, helper, buttonText, validator, required} = currentComponent
  console.log(required) // This is changing 
  const [mainButtonState, setButtonState] = useState(required)

然后一个可触摸组件的JSX看起来像这样

const inputFields = [
  {
    key: 'name', 
    type: 'text', 
    label: `Your Full Name`,
    helper: 'Using your real name would make it more likely for you to get a match',
    templateOptions: { 
      placeHolder: 'Frank Murphy',
      templateStyle: styles.textStyle // refer to the style component
    }
  }, 
  {
    key: 'dob', 
    type: 'dateTyper', //change this to Dob component
    label: 'Your Date of birth',
    helper: 'Your Birthdate will help us in connecting you with people of similar age',
    required: true
  }]

 <TouchableOpacity 
   onPress={getValueFromState}
    disabled={mainButtonState}
    > 
    <Text> {usedButtonText} </Text> 
  </TouchableOpacity>

{usedButtonText}

这里onPress只会增加

索引的状态

我面临的问题是，当状态增加时，inputFields的第一个对象中的

未定义的
required现在是
true

这样，我希望我的按钮将被禁用，但我的按钮仍处于活动状态，我的主按钮状态未设置为
true
，而是
未定义
，有人能帮我弄清楚如何更改
mainbutonstate

const [index, setIndex] = useState(0)
const currentComponent = inputFields[index]
const {key, type, label, helper, buttonText, validator, required} = currentComponent
console.log(required) // This is changing 
const [mainButtonState, setButtonState] = useState(required)

您正在混淆初始化和更新变量

下面是发生的情况：

第一次渲染时，请执行以下操作：


将
索引初始化为
0

将
currentComponent
设置为
inputFields[0]
初始化
main按钮安装状态
为
未定义
（因为
currentComponent.required
为
未定义
）

当您触发
onPress
事件时，您会增加
索引
，这会导致第二次重新渲染

在第二次重播时，您：


将
currentComponent
设置为
inputFields[1]

就这样

是的，
currentComponent.required
现在是
true
，但这与
mainButtonState
的值无关

初始化只在第一次渲染时发生，因此
mainbutonstate
值保持
未定义

要设置
mainButtonState
，需要调用
setButtonState
。我还将setter函数名更改为
setmainbutonstate
，以匹配变量名，因为setter函数的命名与变量不同是一种不好的做法。Setter函数应该是它们设置的变量的名称，前缀为“set”

您正在混淆初始化和更新变量

下面是发生的情况：

第一次渲染时，请执行以下操作：


将
索引初始化为
0

将
currentComponent
设置为
inputFields[0]
初始化
main按钮安装状态
为
未定义
（因为
currentComponent.required
为
未定义
）

当您触发
onPress
事件时，您会增加
索引
，这会导致第二次重新渲染

在第二次重播时，您：


将
currentComponent
设置为
inputFields[1]

就这样

是的，
currentComponent.required
现在是
true
，但这与
mainButtonState
的值无关

初始化只在第一次渲染时发生，因此
mainbutonstate
值保持
未定义

要设置
mainButtonState
，需要调用
setButtonState
。我还将setter函数名更改为
setmainbutonstate
，以匹配变量名，因为setter函数的命名与变量不同是一种不好的做法。Setter函数应该是它们设置的变量的名称，前缀为“set”。
您说您将
inputField
作为props传递，但我看不到您在子组件中的任何地方引用
props
。@JMadelaine上面的代码只包含我认为相关的部分。不管怎样，现在将其添加到代码段：）我的答案是否帮助您解决了这个问题？如果是，你能将其标记为已接受的答案，以便将问题标记为已解决吗？你说你正在将
inputField
作为props传递，但我看不到你在子组件中的任何地方引用
props
。@JMadelaine上面的代码只包含我认为相关的部分。不管怎样，现在将其添加到代码段：）我的答案是否帮助您解决了这个问题？如果是，你能将其标记为已接受的答案，以便将问题标记为已解决吗？