Question

我正在创建一个反应组件（子组件），该组件将JSON / Object数组作为输入（来自Parent）作为道具。

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。我还要将设置器函数名称更改为setMainButtonState以匹配变量名称，因为不好的做法是将设置器函数的名称与变量的名称不同。设置器函数应为其设置的变量的名称，并以“ set”为前缀。

反应挂钩状态未更新

1 个答案: