Reactjs 显示allrecordings.map的react页面不是函数

我已经在react js中创建了一个页面来显示所有录制的列表。它在表格中还有一个视图录制按钮。当我点击查看录制按钮时，它会重定向到另一个显示特定录制数据的页面

现在，当我再次单击侧菜单中的所有录制按钮时，它会显示错误allrecordings.map不是一个函数，但当我刷新页面时，错误会消失

---

问题是为什么在突然单击显示错误时刷新页面会加载数据。我是新来的，所以任何人都可以在这方面指导我。

这应该对你有用：

allRecordings?allRecordings.map((item, index) => {
                   let cdate = item.recorded_dt;
                       var  d = cdate.split('T')[0];


                 return (


                  <tr key={(item.id)}>  
                    
                    <td>{ item.id}</td>
                    <td>{ (item.clientname) ? item.clientname : "n/a" }</td>
                    <td>{ (item.companyname) ? item.companyname : "n/a" }</td>
                    <td>{ (item.recorded_dt) ? d :"n/a" }</td>
                    <td>{ (item.file_length_min) ? item.file_length_min :"n/a" }</td>
                    <td>{ (item.signal_quality) ? item.signal_quality : "n/a" }</td>
                    <td>{ (item.HR_bpm) ? item.HR_bpm : "n/a" }</td>
                    <td>{ (item.name) ? item.name :"n/a" }</td>
                    <td><button onClick={() => this.fetchREcordingJson(item.id) }>View Recording</button> </td>
                    
                  </tr>  
                  

                  );

                } :""

allRecordings？allRecordings.map（（项目，索引）=>{
设cdate=item.recorded\u dt；
var d=cdate.split（'T'）[0]；
返回(
{item.id}
{（item.clientname）？item.clientname:“不适用”}
{（item.companyname）？item.companyname:“不适用”}
{（项目.记录在案）？d：“不适用”}
{（item.file_length_min）？item.file_length_min:“不适用”}
{（项目信号质量）？项目信号质量：“不适用”}
{（item.HR_bpm）？item.HR_bpm:“不适用”}
{（item.name）？item.name:“不适用”}
this.fetchREcordingJson（item.id）}>查看录制
);
} :""

---

错误清楚地表明，在某一点上，您的所有录制都未定义，这就是发生此错误的原因。

您的数据是异步的，目前没有任何价值。。。 当还没有数据时，请使用没有错误的条件

allRecordings ? allRecordings.map((item, index) => {
                   let cdate = item.recorded_dt;
                       var  d = cdate.split('T')[0];


                 return (


                  <tr key={(item.id)}>  
                    
                    <td>{ item.id}</td>
                    <td>{ (item.clientname) ? item.clientname : "n/a" }</td>
                    <td>{ (item.companyname) ? item.companyname : "n/a" }</td>
                    <td>{ (item.recorded_dt) ? d :"n/a" }</td>
                    <td>{ (item.file_length_min) ? item.file_length_min :"n/a" }</td>
                    <td>{ (item.signal_quality) ? item.signal_quality : "n/a" }</td>
                    <td>{ (item.HR_bpm) ? item.HR_bpm : "n/a" }</td>
                    <td>{ (item.name) ? item.name :"n/a" }</td>
                    <td><button onClick={() => this.fetchREcordingJson(item.id) }>View Recording</button> </td>
                    
                  </tr>  
                  

                  );

                } :[]

或者将其与组件开头的数组相等 在类组件中：

  constructor(props) {
        super(props);
        this.state = {
allRecordings :[]
}
}

在功能组件中

const [allRecordings , setAllRecordings ] = useState([]);

---

听起来像是

allrecordings

在您调用

map

时可能不是数组，但在没有看到代码的情况下，这几乎是无法回答的。您能给我们带来一个代码片段，显示如何加载录制吗？当您尝试映射它们时，它们可能未定义上面是代码片段，以显示我如何使用allrecordiMappings.mapplease随附一个工作代码段，如果您有一个代码段清楚地显示了您的问题，它将比没有代码段的代码段更快地解决您的问题，例如，您可以从代码沙盒创建一个代码段谢谢您的帮助。现在它正在工作，但需要[]而不是“”

const [allRecordings , setAllRecordings ] = useState([]);