显示和映射来自 axios API 调用的数据到 React答案

【问题标题】：Displaying and mapping data from axios API call into React显示和映射来自 axios API 调用的数据到 React
【发布时间】：2022-02-17 10:31:06
【问题描述】：

我对 React 还很陌生，并且在将我从 Axios API 调用返回的数据显示到应用程序的前端界面时遇到了困难。目前，我一直在尝试将数据映射到项目列表以在前端显示此信息，但无论出于何种原因，数据根本没有显示？有人可以帮我找出映射数组数据并将其显示到前端的最佳方法吗？在映射从 Axios API 调用返回的数据时，我将附上 json 对象的图片和代码的 sn-p。
Data object returned back from Axios Call

Data object from Axios Cont.

Data object from Axios pt.3

return (
    <Container fluid className="content-block">
        <Row style={{ paddingTop: "20px" }}>
            <Col md={6}>
                <h1>User Search</h1>
                <form onSubmit={handleSubmit(onSubmit)}>
                    <input type="text" className="form-control" {...register("userID", { required: true, minLength: 2 })}/>
                    {errors.userID && <p className="error-text">userID is required</p>}
                    <Button variant='form' type="submit">Submit</Button>
                </form>
            </Col>
        </Row>
        {!!procedureServiceList && !!procedureServiceList.specificRecommendations && 
        <Row>
             <Col md={6}>
                    <h1 style={{paddingTop:"20px"}}>Procedures List</h1> 

                    <h2>Recommendations</h2> 
                    <ul> {procedureServiceList.specificRecommendations.map(item => <li key={item.id}>{item.title}</li>)}</ul>
            </Col>
        </Row>
        }
    </Container>
)

【问题讨论】：

请说出您遇到的确切“困难”，好吗？您似乎已经弄清楚了……例如，在 <ul> 元素中。
我明白了，我想我的主要问题是您如何准确地映射列表中没有独特键的数据，如下所示：i.stack.imgur.com/v1kR7.png

标签： javascript reactjs axios mapping filtering

【解决方案1】：

正如上面的评论，你的方法是正确和流行的。我认为这里没有必要更改任何内容

{
  procedureServiceList?.specificRecommendations?.length > 0 ?
    <Row>
      <Col md={6}>
        <h1 style={{ paddingTop: "20px" }}>Procedures List</h1>

        <h2>Recommendations</h2>
        <ul> {procedureServiceList.specificRecommendations.map(item => <li key={item.id}>{item.title}</li>)}</ul>
      </Col>
    </Row> : 'No data'
}

【讨论】：

我明白了，我想我的主要问题是您如何准确地映射列表中没有独特键的数据，如下所示：i.stack.imgur.com/v1kR7.png
在这种情况下，您需要添加一个附加到key 的单独参数。请参阅有关如何执行此操作的相应答案。
是的，我想念元素的键... ^^ tks u

【解决方案2】：

如果您的数据不需要唯一/独特的键，例如 here，那么最好引入一个由 map() 函数自动递增的单独参数。

您的列表如下所示：

<ul>
  {procedureServiceList.specificRecommendations.map(
    (item, i) => <li key={i}>{item.title}</li>
  )}
</ul>

请注意，我们引入了一个参数i，该参数会在遍历您的列表项时自动递增。随意在某处添加console.log(i) 以了解其工作原理！

【讨论】：