Reactjs 将 dict 值转换并插入到react 钩子的列表中

["Book_1", "Book_2", "Book_3"]

[
  {
    "name": "Book_1"
  },
  {
    "name": "Book_2"
  },
  {
    "name": "Book_3"
  }
]

function App() {
   const [dictData, setDictData] = useState([]);

   useEffect(() => {
      axios.get("/fetch_from_db/").then((response) => {
          // ["Book_1", "Book_2", "Book_3"]

          setDictData(dictData => ({
             ...dictData,
             ...{"name": response.data}

          }))

      })
   })

   return (
        <div>
        </div>
    )
}

{
    "name": [
        "Book_1",
        " Book_2",
        " Book_3",
    ]
}

[
    {"name":"Book_1"},
    {"name":"Book_2"},
    {"name":"Book_3"},
]

setDictData(dictData => [
  ...dictData,
  ...response.data.map(name => ({ name }))
])

 useEffect(() => {
    axios.get("/fetch_from_db/").then((response) => {
      setDictData(response.data.map(name => ({ name })))
    })
 }, []) // not dependencies, call only on mount

Reactjs相关问答推荐

为多租户SSO登录配置Azure AD应用程序

更改滑块标记的文本 colored颜色 ./Reaction/MUI 5

在react上隐藏源映射

PWA：注册事件侦听器不会被触发

React - 如何重定向页面以显示数据修改？

React - 函数组件 - 点击两次问题处理

将外部 JavaScript 导入 React(通过文件)

在react 中单击父级中的按钮时如何将数据从子级发送到父级？

如何到达类组件中的状态？

将 useState 设置为组件内部的值

单元测试 useLoaderData() react-router v6 加载器函数

为什么接受 useState 返回的函数的 setter 在使用 React 的单个调用中执行两次？

如何从 graphql/apollo 中的缓存中清除多个查询

更新和删除功能不工作 Asp.net MVC React

如何修复 Next.js 13 中类型 AppRouterInstance 上不存在 x？

在 React 中，为什么不能向空片段添加键(短语法)？

理解 React 中的 PrevState

当父组件重新渲染时做出react ，我失go 了子状态.我错过了什么？

组件焦点上的 MUI 更改栏 colored颜色

为什么我不能使用 formik 更改此嵌套对象中的值