Javascript 警告:setState(…):只能更新新reactjs应用程序上已安装或正在安装的组件
我有以下组成部分:Javascript 警告:setState(…):只能更新新reactjs应用程序上已安装或正在安装的组件,javascript,reactjs,adal.js,Javascript,Reactjs,Adal.js,我有以下组成部分: import React, { Component } from 'react'; import { Row, Col } from 'antd'; import PageHeader from '../../components/utility/pageHeader'; import Box from '../../components/utility/box'; import LayoutWrapper from '../../components/utility/la
import React, { Component } from 'react';
import { Row, Col } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper.js';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import { adalApiFetch } from '../../adalConfig';
export default class extends Component {
constructor(props) {
super(props);
this.state = {
data: []
};
this.fetchData();
}
getValues() {
adalApiFetch(fetch, '/values', {})
.then((response) => {
// This is where you deal with your API response. In this case, we
// interpret the response as JSON, and then call `setState` with the
// pretty-printed JSON-stringified object.
response.json()
.then((responseJson) => {
this.setState({ data: JSON.stringify(responseJson, null, 2) })
});
})
.catch((error) => {
// Don't forget to handle errors!
console.error(error);
})
}
fetchData() {
try {
const data = this.getValues();
!this.isCancelled && this.setState({ data });
} catch(error) {
console.log(error);
}
}
render() {
const { data } = this.state;
const { rowStyle, colStyle, gutter } = basicStyle;
const radioStyle = {
display: 'block',
height: '30px',
lineHeight: '30px'
};
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' }
];
const optionsWithDisabled = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: false }
];
return (
<div>
<LayoutWrapper>
<PageHeader>{<IntlMessages id="pageTitles.TenantAdministration" />}</PageHeader>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={12} sm={12} xs={24} style={colStyle}>
<Box
title={<IntlMessages id="pageTitles.TenantAdministration" />}
subtitle={<IntlMessages id="pageTitles.TenantAdministration" />}
>
<ContentHolder>
<ul>
{data && data.map(item => (
<li>{item.name}</li>
))}
</ul>
</ContentHolder>
</Box>
</Col>
</Row>
</LayoutWrapper>
</div>
);
}
}
控制台中的错误是:
警告:设置状态(…):只能更新已安装或正在安装的
组成部分。这通常意味着您在卸载数据时调用了setState()
组成部分。这是禁止的
发生这种情况是因为您正在打电话 构造函数中的.fetchData()。但是setState()只能在呈现组件后调用 最好在componentDidMount()中调用这个.fetchData() 在render()函数中添加:
<ContentHolder>
<ul>
{data.length && data.map(item => ( <li>{item.name}</li> ))}
</ul>
</ContentHolder>
{data.length&&data.map(item=>(- {item.name}
)}
**data.length和not data作为空数组的计算结果始终为true。您有什么问题吗?您的代码中存在各种问题。第一个组件构造函数不是进行API调用的正确位置,请使用
componentDidMount
和componentdiddupdate
生命周期方法。Secondconst data=this.getValues()代码>毫无意义,因为getValues
是异步的。Finally(不是Finally:)getValues
通过不返回承诺来打破承诺链。我得到以下结果:TypeError:无法读取未定义的属性“length”
<ContentHolder>
<ul>
{data.length && data.map(item => ( <li>{item.name}</li> ))}
</ul>
</ContentHolder>