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)來更新狀態。