React中将API返回数组转为对象数组并存入状态的问题

你的核心问题是没有正确遍历API返回的数组来转换每个元素，反而把整个数组赋值给了name属性，还把原本的数组类型state改成了对象类型。按下面的步骤修正即可：

修正代码 #

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

   useEffect(() => {
      axios.get("/fetch_from_db/").then((response) => {
          // 遍历数组，将每个元素转换为{name: 书名}的格式
          const transformedBooks = response.data.map(book => ({
              name: book.trim() // 去除字符串首尾空格，对应你示例里的" Book_2"
          }));
          // 直接用转换后的数组更新state
          setDictData(transformedBooks);
      })
   }, []) // 空依赖数组确保只在组件首次挂载时请求一次API

   return (
        <div>
            {/* 可选：渲染转换后的数据 */}
            {dictData.map((book, index) => (
                <div key={index}>{book.name}</div>
            ))}
        </div>
    )
}

关键说明 #

• 使用Array.map()遍历API返回的数组，每个元素都会被转换成你需要的对象格式
• trim()用于清理字符串首尾的空格（如果API返回的数据没有多余空格可以省略）
• 给useEffect添加空依赖数组[]，避免组件重复渲染时多次发起API请求，这是React的最佳实践
• 直接将转换后的数组传给setDictData，不需要使用函数式更新（除非你需要基于之前的state做修改，这里不需要）

内容的提问来源于stack exchange，提问作者Xmas