javascript - react Hook 状态不更新

Question

我正在创建一个 react 组件(子)，它将 JSON/Object 数组作为输入(来自父级)作为 Prop 。

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
  }]

在我的子组件中，我正在渲染它。在此对象数组中，请注意第二个对象中需要的键 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 看起来像这样

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

这里 onPress 只会增加 index 的状态。

我面临的问题是，当状态递增时，我在 inputFields 的第一个对象中的要求是 undefined 现在是 true。

有了这个，我希望我的按钮将被禁用，但我的按钮仍然处于事件状态并且我的 mainButton 状态未设置为 true 而它仍然是 undefined 有人可以吗帮我弄清楚我应该如何在这里更改 mainButtonState？

Answer 1

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)

您混淆了初始化和更新变量。

下面是发生的事情:

在第一次渲染时:

• 将index初始化为0。
• 将 currentComponent 设置为 inputFields[0]
• 将mainButtonState初始化为undefined(因为currentComponent.required是undefined)

当您触发 onPress 事件时，您会增加 index，这会导致第二次重新呈现。

第二次重新渲染你:

• 将 currentComponent 设置为 inputFields[1]

就是这样。

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

初始化仅在首次渲染时发生，因此您的 mainButtonState 值保持为 undefined。

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