如何在 React 中修改這個 useState？

Question

我這樣定義 state 鈎子：

const [list, setList] = useState(
  [] as { name: string; value: string }[],
)

我也在這里得到一個數組：

const arrayFortheList = ['a','b','c']

這是我的工作：

setList(
 arrayFortheList.map((e):void => {name: e, value: ''})
)

錯誤信息也在這里： Objects are not valid as a React child (found: object with keys {paramName, paramValue})。 如果您打算渲染一組子項，請改用數組。

我該如何糾正？

Answer 1

您剛剛在箭頭 function 中犯了一個非常常見的語法錯誤。 要返回 object，您必須添加一個額外的() ，例如：

setList(
 arrayFortheList.map(e => ({name: e, value: ''}))
                          ^                    ^
)

否則{}表示不返回任何內容的塊。

Answer 2

除了@gazdagergo 的回答，您還可以JSON.stringify()您的 object。

setList(arrayFortheList.map((e):void => JSON.stringify({name: e, value: ''})))

然后讀取您的數據，您將JSON.parse()來檢索 object。

var list_state = JSON.parse(list)