【发布时间】：2020-07-15 14:21:29
【问题描述】：
我在 chrome devtools 控制台中出现警告：
Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
in div (at Search.jsx:37)
in Search (at pages/index.jsx:79)
in main (created by Basic)
in Basic (created by Context.Consumer)
in Content (at pages/index.jsx:78)
in section (created by Context.Consumer)
in BasicLayout (created by Context.Consumer)
...
代码按预期工作。它是 Flexsearch 的 React 实现，是 Web 上最快且内存最灵活的全文搜索库。 但是这个警告让我很烦。
我在这方面做了很多工作，但没有找到合适的解决方案。
Search.jsx：
/**
* Vendor Import
*/
import React from 'react';
import _find from 'lodash/find';
import _map from 'lodash/map';
import _isEmpty from 'lodash/isEmpty';
import _isEqual from 'lodash/isEqual';
import NotFound from '../images/notfound.svg';
import { Col, Row } from 'antd';
/**
* Component import
*/
import ProductList from '../components/ProductList';
/**
* Utils import
*/
import { filterData } from '../utils/filterdata';
import ContextConsumer from '../utils/context';
/**
* Style import
*/
import './search.css';
class Search extends React.Component {
state = {
query: '',
results: this.props.groupedData,
};
render() {
return (
<div className={this.props.classNames}>
<ContextConsumer>
{({ data }) => {
this.handleSearch(data.query);
}}
</ContextConsumer>
<div className='search__list'>
{!_isEmpty(this.state.results) ? (
<ProductList products={this.state.results} />
) : (
<Row>
<Col span={24} className='no_results'>
No results corresponding to "<b>{this.state.query}</b>"
</Col>
<Col xs={24} sm={12} md={8} lg={6} className='no_results'>
<NotFound />
</Col>
</Row>
)}
</div>
</div>
);
}
/**
* Handle search
* @param {String} query
*/
handleSearch = (query) => {
if (!_isEqual(this.state.query, query)) {
const groupedData = this.props.groupedData;
const results = this.getSearchResults(groupedData, query);
this.setState({ results: results, query: query });
}
};
/**
* Get the data associated to the query
* @param {Array} data
* @param {String} query
*/
getSearchResults(data, query) {
const index = window.__FLEXSEARCH__.en.index;
const store = window.__FLEXSEARCH__.en.store;
if (!query || !index) {
return data;
} else {
let resultingNodesID = [];
Object.keys(index).forEach((idx) => {
resultingNodesID.push(...index[idx].values.search(query));
});
resultingNodesID = Array.from(new Set(resultingNodesID));
const resultingNodes = store
.filter((node) => (resultingNodesID.includes(node.id) ? node : null))
.map((node) => node.node);
const resultingGroupedData = [];
_map(resultingNodes, (node) => {
resultingGroupedData.push(_find(data, { ref: node.ref }));
});
return resultingGroupedData;
}
}
/**
* Invoked immediately after updating occurs.
* @param prevProps
*/
componentDidUpdate(prevProps) {
const { selectedMenu, groupedData } = this.props;
if (!_isEqual(prevProps.selectedMenu, selectedMenu)) {
const filteredData = filterData(groupedData, selectedMenu);
const results = filteredData;
this.setState({ results: results });
}
}
}
export default Search;
上下文提供者组件：
/**
* Vendor Import
*/
import React from 'react';
const defaultContextValue = {
data: {
// set your initial data shape here
query: '',
},
set: () => {},
};
const { Provider, Consumer } = React.createContext(defaultContextValue);
class ContextProviderComponent extends React.Component {
constructor() {
super();
this.setData = this.setData.bind(this);
this.state = {
...defaultContextValue,
set: this.setData,
};
}
setData(newData) {
this.setState((state) => ({
data: {
...state.data,
...newData,
},
}));
}
render() {
return <Provider value={this.state}>{this.props.children}</Provider>;
}
}
export { Consumer as default, ContextProviderComponent };
我做错了什么？
ps：如果您看到一些改进或无用的代码，我会全力以赴！
【问题讨论】：
标签： javascript reactjs search jsx