reactjs 如何在React.js中迭代嵌套对象

8cdiaqws  于 2023-05-06  发布在  React
关注(0)|答案(1)|浏览(169)

我在一个项目中使用react-bootstrap-typeahead组件。我有以下API响应数据:

{
  "data": [
    {
      "i": 21,
      "att": {
        "lead": "Rent",
        "city": "bangalore"
             }
    }, 
{
... 
}
... 
  ]
}

如何获取城市名称并提供给组件的options属性?先谢谢你了。
编辑1:
获取API响应的代码是:

const [myData, setMyData] = useState();

  async function getCities() {

    return await axios.get(`${API_URL}/api/cp`)

  }
  useEffect(() => {

    getCities().then((response) => setMyData(response))
    console.log(myData)

  }, [props])

编辑二:

async function getCities() {

    const dataOut = await axios.get(`${API_URL}/api/cprops`)

    return dataOut.data

  }
  useEffect(() => {

    getCities().then((response) => setMyData(response))
    console.log(myData)

  }, [props])

下面是获取数据的更新代码

k3bvogb1

k3bvogb11#

你可以使用map()方法来迭代React.js中的嵌套对象。下面是一个如何使用它来迭代数据对象的示例:

const data = {
  "data": [
    {
      "i": 21,
      "att": {
        "lead": "Rent",
        "city": "bangalore"
      }
    },
    {
      "i": 22,
      "att": {
        "lead": "Sale",
        "city": "mumbai"
      }
    }
  ]
};

const TableComponent = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Lead</th>
          <th>City</th>
        </tr>
      </thead>
      <tbody>
        {data.data.map((item) => (
          <tr key={item.i}>
            <td>{item.i}</td>
            <td>{item.att.lead}</td>
            <td>{item.att.city}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

相关问题