React Hooks 状态未更新

Question

我无法更新我的反应钩子状态。

所以这就是我正在做的（这是一个缩小的相关代码）。

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钩子更新状态

相应地更新道具值和 HOC 组件

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是一个 setter，它应该是setPayloadData(newData)来更新状态。