在不知道键的情况下渲染 reactjs 对象的值

Question

我对 reactjs 很陌生，正在尝试呈现通过 reactjs 中的 API 调用检索到的数据。但是，我收到以下错误：

“对象作为 React 子项无效（已找到：具有键 {key1, key2} 的对象）。如果您打算呈现子项集合，请改用数组。”

这是我的代码：

function App() {
  const [returnedData, setReturnedData] = useState([]);

  const fetchData = async () => {
    const newData = await fetch("/api", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    }).then((res) => res.json());
    setReturnedData(newData);
  };

  fetchData();
  return (
    <>
      <div>
        {Object.keys(returnedData).map((item, index) => (
          <h2 key={index}>{returnedData[Number(item)]}</h2>
        ))}
      </div>
    </>
  );

}

export default App;

如果你让我知道如何解决这个问题，我将不胜感激！基本上，我应该如何在不知道密钥的情况下呈现数据？因为我只有在运行代码后才能访问密钥。

此程序的目的是从 SQL 服务器数据库中检索数据。为此，我使用了 express 和 mssql 包。这是必须在服务器端运行的代码：

const express = require('express');
const cors = require('cors');
const dbOperation = require('./dbFiles/dbOperation');

const API_PORT = process.env.PORT || 5000;

const app = express();
app.use(express.json());
app.use(express.urlencoded());

app.use(cors());

app.post('/api', async (req, res) => {
    console.log("Called!")
    const result = await dbOperation.getData();
    res.send(result);
});

app.listen(API_PORT, () => console.log(`Listening on port ${API_PORT}`));

下面的代码用于从数据库中获取数据：

const config = require('./dbConfig');
const sql = require('mssql');

const getData = async() => {
    try{
        let pool = await sql.connect(config);
        let allData = await pool.request().query("SELECT * from Alerts");
        return allData;
    }
    catch(error){
        console.log(error);
    }
}
module.exports = {
    getData
}

Answer 1

你的代码有问题，会导致死循环。你不能

setState

里面

render

。修改代码如下：

如果数据是像 {key1: 1, key2:2} 这样的对象。

function App() {
  const [returnedData, setReturnedData] = useState({});

  useEffect(() => {

    const fetchData = async () => {
      const newData = await fetch("/api", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      }).then((res) => res.json())
      setReturnedData(newData)
    };
  
    fetchData();
  }, [])

  
  return (
    <>
      <div>
        {Object.keys(returnedData).map((item, index) => (
          <h2 key={item}>{returnedData[item]}</h2>
        ))}
      </div>
    </>
  );

}

export default App;

如果数据是数组，如[1, 2]，则将return改为：

return (
    <>
      <div>
        {returnedData.map((item, index) => (
          // if item is an Object, you should use item.xxx to get anything you want. An Object child is not valid.
          <h2 key={index}>{item}</h2>
        ))}
      </div>
    </>
);

Answer 2

上述错误的原因是，您正在尝试渲染一个对象而不是原始值，在这种情况下，我猜您正在尝试渲染一个名称或您认为是字符串值的东西。 returnedData[Number(item)] 但显然这会返回 Object {}。 这应该是一个字符串而不是一个对象。检查您的 returnedData 数组值并确保您正在访问正确的值。它应该是一个字符串（在本例中）。

const 结果 = await dbOperation.getData(); 重新发送（结果）； 确保此结果内容数据格式正确，它可能是一个 JSON 对象。你可能需要解析。 JSON.parse(结果).

您只需控制台记录您的 BE 响应并使用键值检查您正在访问的内容。如果数据结构类似于 {item: {key: "", value: ""} ，则必须提取 returnedData[Number(item)].value 才能正确呈现它。