无法将json值检索到表

问题描述

const App = () => {

   const [symbol,setSymbol] = useState([]);
   const [loading,setLoading] = useState(false);
   const getSymbolData = async () => {
     try{
       const data = await axios.get("https://cloud.iexapis.com/stable/stock/market/batch?symbols=PGX,MORL,EMLC,GYLD");
       console.log(data);
       setSymbol(data.data);
     } catch (e) {
       console.log (e);
     }
   };

const columns = [

  {datafield: "price",text: "Current Price"},{datafield: "symbol",text: "Symbol" },{datafield: "companyName",text : "Company Name"}

];
 useEffect (() => { 
   getSymbolData();
   },[]);
  return (
   <div className="App"> 
  
      <BootstrapTable
      keyField= "symbol"
      data= {symbol}
      columns={columns}
      pagination={paginationFactory()}
      />  
  </div>
  );
};

export default App;

JSON结果-

控制台输出：

Blockquote

{数据：{…}，状态：200，statusText：“”，标头：{…}，配置：{…}，…} 配置：{url：“ https://cloud.iexapis.com/stable/stock/market/batc…s，quote&token=”，方法：“ get”，标头：{…}，transformRequest：Array（1），transformResponse ：Array（1），…} 数据：{PGX：{…}，MORL：{…}，EMLC：{…}，GYLD：{…}，IPFF：{…}，…} 标头： 内容类型：“ application / json; charset = utf-8” proto ：对象 请求：XMLHttpRequest {readyState：4，超时：0，withCredentials：false，上传：XMLHttpRequestUpload，onreadystatechange：ƒ，…} 状态：200

解决方法

基于错误结果，您正在通过
将对象传递给数据道具 <BootstrapTable data={symbol}>需要一个数组

您的axios响应似乎是一个大对象，并且该道具需要一个对象数组

首先将其定义为数组：

const [symbol,setSymbol] = useState([]);

但是当您将setState设置为Object时（根据您显示的JSON响应），那就是发生错误的时间

setSymbol(data.data);

请参见示例here，了解如何与BoostrapTable结合使用数据