React Hooks状态未更新

Question

我无法更新我的react钩子状态。

这就是我正在做的(这是一个精简的相关代码)。

export const Signup = (props) => {
  const key= 'randomKey'
  const onTextChangeHandler = (text) => {
    console.log(key)
    setPayloadData[key] = text
    console.log(payload)
  }
  const [payload, setPayloadData] = useState({})
  return (
   <View>
    <TextInput  
          placeholder={placeHolder}
          number={number}
          style={[{color: defaultColor, borderColor: defaultColor}, styles.defaultTextInputStyle, templateStyle]}
          onChangeText={text => onTextChangeHandler(text)}
          value={payload[key]}
        />
  </View> 
)
}

这里，在上面的代码中，请注意

 const onTextChangeHandler = (text) => {
    console.log(key)
    setPayloadData[key] = text
    console.log(payload)
  }

这里的文本是我输入的任何内容。键的console.log正在返回randomKey，但是

console.log(payload)

是不确定的。有没有人能帮我找出我做错了什么？

Answer 1

setPayload是一个函数，不是一个对象。您实际要做的是为函数分配一个新字段，payload保持不变，因为负责更新它的函数是，而不是被调用的。

setPayloadData[key] = text; // the function object mutation occures

解决方案：只需将其作为函数调用并传递所需的参数：

setPayloadData({ [key]: text });

Answer 2

示例:使用useState挂钩更新状态

相应地，更新属性值和特定组件

import React, { useState } from 'react';


const Signup = (props) => {
  const key= 'userKeyboardStrokes'
  const onTextChangeHandler = (event) => {
    setPayloadData({ [key]: event.target.value })
  }
  const [payload, setPayloadData] = useState({})

  return (
    <React.Fragment>
      <input  
            type="text"
              onChange={text => onTextChangeHandler(text)}
          />

    </React.Fragment> 
  )
}
module.exports = Signup;

输出结果：

{
  userKeyboardStrokes: "user input on object"
}

游乐场示例：https://stackblitz.com/edit/react-npytvn?file=testing.js

Answer 3

setPayloadData是一个设置器，它应该是setPayloadData(newData)来更新状态。