无法将 json 值检索到 table

Question

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：“”，headers：{…}，配置：{…}，…} 配置：{url: "https://cloud.iexapis.com/stable/stock/market/batc…s,quote&token=", 方法："get", headers: {...}, transformRequest:阵列（1），transformResponse：阵列（1），...} 数据：{PGX：{...}，MORL：{...}，EMLC：{...}，GYLD：{...}，IPFF：{...}，...} headers: content-type: "application/json; 字符集=utf-8" 原型：Object 请求：XMLHttpRequest {readyState：4，超时：0，withCredentials：false，上传：XMLHttpRequestUpload，onreadystatechange：ƒ，...} 状态：200

Answer 1

根据错误结果，您正在将一个对象传递给位于
的数据属性 <BootstrapTable data={symbol}> 需要一个数组

你的 axios 响应似乎是一个大对象，这个 prop 需要一个对象数组

起初它被定义为一个数组：

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

但是当你设置状态时它变成一个对象（鉴于你显示的 JSON 响应）并且那是错误发生的时候

setSymbol(data.data);

查看有关数据结构如何与 BoostrapTable 一起使用的示例here

无法将 json 值检索到 table

Unable to retrieve json values to table

javascript

reactjs

react-bootstrap

react-bootstrap-table

react-table