类型错误：无法读取 React-Views 中未定义的属性(读取"map")

我被困在这个错误上，我无法弄清楚我做错了什么，从我发现它看起来像我的对象列表是空的，但这没有任何意义，因为我能够将它记录到控制台。我认为问题可能是我如何使用setState。我在网上找遍了，就是找不到解决办法。

const Head = require ('../components/Head.jsx');
const Nav = require ('../components/Nav.jsx');
const Footer = require ('../components/Footer.jsx');
const getPipeLine = require('../../service/Contructor.js');
let display = new getPipeLine;
class ActiveLoans extends React.Component {
constructor(props) {
super(props)
this.state = {
data: display
}; 
}; 
async componentDidMount() {
const activeDisplay = async () => 
await this.state.data.then((results) => {
console.log('Data Fetched')
!!!this.setState({results});               
});
activeDisplay()
};
render(){
return(
<React.Fragment>
<Head />
<Nav />
{this.state.results.map((result) => (
<div key={result.a.LoanNumber}>
<thead>
<tr>
<th>Loan Number</th>
<th>Loan Status</th>
<th>Loan Type</th>
<th>Submit Date</th>
<th>Last Review</th>
</tr>
</thead>
<tbody>
<tr>
<td>{result.a.LoanNumber}</td>
<td>{result.a.LoanStatus}</td>
<td>{result.a.LoanType}</td>
<td>{result.a.SubmitDate}</td>
<td>{result.a.LastReview}</td>
</tr>                
</tbody>
</div>
))}

<Footer />    
</React.Fragment>
)}}
module.exports = ActiveLoans;

我能够像这样打印setState的结果，并将其记录到控制台，所以我不明白为什么我不能使用map

显示结果

const activeDisplay = async () => 
await this.state.data.then((results) => {
console.log('Data Fetched')
!!!this.setState({results}, 
(async () => {
let obj = await results;
console.log('Done:', obj);
})());               
});
activeDisplay()
};

我已经尝试了几种不同的方法来显示使用地图的结果，但到目前为止没有任何工作。当我使用this。state。results?什么也没有显示，所以我想我退货的方式不对。

这是我的对象列表的前几个结果，

'0': {
LoanNumber: 12345252,
LoanStatus: 'Initial',        
LoanType: 'FHA',
SubmitDate: '1/14/2022',      
LastReview: null
},
'1': {
LoanNumber: 12345626,
LoanStatus: 'Initial',        
LoanType: 'VA',
SubmitDate: '1/14/2022',      
LastReview: null
},
'2': {
LoanNumber: 12345670,
LoanStatus: 'Initial',        
LoanType: 'Conventional',     
SubmitDate: '1/14/2022',      
LastReview: null
},

我使用express-react-views在服务器端渲染

我有两个对象列表，第一个是"a"，第二个是"I"，它们都被解构了。

我认为你应该为this.state.data做一个null/undefined检查，如果它存在，那么只继续使用map。

Array.isArray(this.state.data) && this.state.data.map(...)

另外，如果你能把它写为带有钩子的功能组件，并在渲染方法中等待this.state.data，我还没有使用过SSR。

这里也有一个错别字const getPipeLine = require('../../service/Contructor.js');Contructor =比;构造函数

只有在API调用成功完成时才将results属性设置为状态。React不会等待API调用完成初始渲染。在初始渲染期间，this.state.results的值将是undefined。您应该始终初始化构造函数中的所有状态属性。这有两个原因:

初始渲染调用将使用默认状态属性值，所以不会有这样的错误

这个问题可以通过在指定初始状态时正确初始化results属性来解决。

this.state = {
data: display,
results: []
};

相关内容

最新更新

热门标签：