Question

我需要在UsersData数组中显示与数组编号相同的值，但是我无法在ReactJS中显示出来。

下面是CodeSandbox中提供的示例。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const usersData = [
    {
      total: 3,
      data: [
        { id: 1, name: "Tania", username: "floppydiskette" },
        { id: 2, name: "Craig", username: "siliconeidolon" },
        { id: 3, name: "Ben", username: "benisphere" }
      ]
    }
  ];

  const numbers = [1, 2, 3, 4, 5];

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      {numbers.map((number, index) => (
        <li key={index}>{number}</li>
      ))}

      {usersData.length > 0 ? (
        usersData.map((data, index) => <div key={index}>Nome: {data.name}</div>)
      ) : (
        <div>No users </div>
      )}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

1）usersData是一个包含一个元素（一个对象）的数组

2）您需要遍历该对象的数据数组并显示其每个对象的name属性值。

{usersData[0].data.length > 0 ? (
  usersData[0].data.map((obj, index) => <div key={index}>Nome: {obj.name}</div>)
) : (
  <div>No users </div>
)}

Forked update

Answer 2

您的usersData是一个数组usersData = []，其中包含一个对象usersData = [{}]，其本身包含数据usersArray = [{{data：[]}]]的数组，因此您需要将变量更改为一个对象，然后像这样

在其内部的数据数组上使用map函数

    const usersData = {
      total: 3,
      data: [
        { id: 1, name: "Tania", username: "floppydiskette" },
        { id: 2, name: "Craig", username: "siliconeidolon" },
        { id: 3, name: "Ben", username: "benisphere" }
      ]
    };

，您的循环将变为

      {usersData.data.length > 0 ? (
        usersData.data.map((user, index) => <div key={index}>Nome: {user.name}</div>)
      ) : (
        <div>No users </div>
      )}

Answer 3

您需要做

  usersData[0].data.map(({name}, index) => <div key={index}>Nome: {name}</div>)

因为您不在上面的代码中访问数据数组

Answer 4

usersData.map((userData, index) => {
     return userData.data.map(item => {
         return <div key={index + item.id}>Nome: {item.name}</div>;
     });
});

显示具有多个对象的数组值

4 个答案: