表不显示 json 值答案

【问题标题】：Table not displaying the json values表不显示 json 值
【发布时间】：2021-02-10 06:27:37
【问题描述】：

该表正在创建在 json url 中看到的字段 PGX,MORL,EMLC,GYLD,BSJF,MONY 它看到 6 个符号并创建 6 个单元格。每个符号 1 个单元格它知道有 6 个符号，但它不想显示值

问题出在哪里？请帮忙？？？？

import React, { useState, useEffect } from "react";
import BootstrapTable from 'react-bootstrap-table-next';


const App = props => {
 
  const [hasError, setErrors] = useState(false);
  const [value, setValues] = useState({});

  

  useEffect(() => {
    async function fetchData() {
    const res = await fetch("https://sandbox.iexapis.com/stable/stock/market/batch?symbols=PGX,MORL,EMLC,GYLD,BSJF,MONY&types=stats,quote&token=");
     res
       .json()
       .then(res => setValues(res))
       .catch(err => setErrors(err));
   }
   console.log(quote);
   fetchData();
   }, []);
  const quote = Object.keys(value).map(i => value[i]);
  const columns = [
   
    {
      dataField: 'id', 
      text: 'Id'
    }, {
    
    
    dataField: 'Symbol', 
    text: 'Symbol'
  }, {
    dataField: 'price',
    text: 'Price'
  }, {
    dataField: 'CompanyName',
    text: 'Company Name'
  }];
  return (


    

    <div>
     <BootstrapTable keyField= "id" data={quote} columns={columns} />
     
    </div>


    


  );


}

export default App;

【问题讨论】：

这能回答你的问题吗？ Infinite loop in useEffect
不要使用 async 函数，然后 then.catch 会伤害我的眼睛
遇到两个孩子用同一个钥匙，[object Object]。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一键可能会导致子项被复制和/或省略——这种行为不受支持并且可能
heyitsmarcucu @heyitsmarcucu 你能提供这个答案吗？

标签： reactjs loops jsx

【解决方案1】：

朋友，你很幸运。这是一个超级简单的修复。错误在你的useEffect中，第二个参数应该是一个数组。如果你只想在组件初始渲染时运行 useEffect，它应该是一个空数组。

useEffect 文档的链接： https://reactjs.org/docs/hooks-effect.html

您的 fetch 调用似乎也存在问题，因此您可能需要查看下一个问题，因为它会产生错误。

最后，console.log(value) 不会记录结果，因为 setPlanets 函数是异步的。分别在 .then 和 .catch 函数中尝试控制台记录“res”和“err”。

import React, { useState, useEffect } from "react";
import BootstrapTable from 'react-bootstrap-table-next';

const App = () => {
 
  const [hasError, setErrors] = useState(false);
  const [value, setPlanets] = useState({});

  useEffect(() => {
    async function fetchData() {
      const res = await fetch("https://cloud.iexapis.com/stable/stock/market/batch?symbols=PGX,MORL,EMLC,GYLD,BSJF,MONY&types=stats,quote&token=");
      res
        .json()
        .then(res => setPlanets(res))
        .catch(err => setErrors(err));
    }
    console.log(value);
    fetchData();
  }, []);
  const quote = Object.keys(value).map(i => value[i]);
  const columns = [{
    dataField: 'symbol',
    text: 'Symbol'
  }, {
    dataField: 'price',
    text: 'Price'
  }, {
    dataField: 'CompanyName',
    text: 'Company Name'
  }];
  return (
    <div>
     <BootstrapTable keyField='id' data={ quote } columns={ columns } />
    </div>
  );


}

export default App;

【讨论】：

谢谢，我更新了错误：“列表中的每个孩子都应该有一个唯一的“关键”道具
这是一个警告，但您在 map 函数中返回的每个项目也应该有一个“键”字段。在这种情况下，您可以将其设置为 'key=id'
遇到两个孩子使用相同的键，[object Object]。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一键可能会导致子项被复制和/或省略——这种行为不受支持并且可能
最简单的办法是设置key等于索引，也就是map函数中的第二个参数

【解决方案2】：

在useEffect上你需要传递[]执行一次或者添加一个依赖[something]

useEffect(() => {
 async function fetchData() {
 const res = await fetch("https://cloud.iexapis.com/stable/stock/market/batch?symbols=PGX,MORL,EMLC,GYLD,BSJF,MONY&types=stats,quote&token=");
  res
    .json()
    .then(res => setPlanets(res))
    .catch(err => setErrors(err));
}
console.log(value);
fetchData();
}, []);

【讨论】：

谢谢，我更新了错误：“列表中的每个孩子都应该有一个唯一的“关键”道具。”
您的数据的键 id 的值是整数？
遇到两个孩子用同一个钥匙，[object Object]。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一键可能会导致子项被复制和/或省略——这种行为不受支持并且可能