Reactjs 知道是什么导致“；警告：setState（…；）：无法在现有状态转换期间更新”；，但不确定原因应该转移到哪里

我遇到了这个错误。关于它的问题很多，但仍然很难弄清楚我需要在哪里采取行动来避免错误

警告：setState（…）：无法在现有状态转换期间更新（例如在渲染或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数；构造函数的副作用是一种反模式，但可以移动到componentWillMount

我有两个兄弟容器，我正试图在它们之间共享一个Redux存储：通过一个操作更新其中一个存储，以便我可以在另一个存储中使用它。一个容器是搜索/筛选

框，另一个容器是结果列表

结果会随着用户类型的不同而缩小。随着字段的减少，搜索框下方的

会显示当前结果的数量。这个数字是在结果列表容器中确定的，应该在其中通过操作updatethestore传递，这样我就可以在搜索框容器中调用它。更新正在进行，但并非没有此错误污染浏览器控制台

我知道错误的原因是：使用以下内容更新

render（）

中的存储：

getCount(n) {
    this.props.posCount(n.length);
}

我只是不清楚在

render（）

之外调用它的位置，这将允许在安装容器后进行更新。因此，

componentDidMount（）

）将无法工作，因为它在容器装入且用户开始键入后不会更新

以下是父容器和两个同级容器：

// parent container
// ./query.js

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';

// imports for the basic query when selected
import BasicQueryPositionList from './bq_position_list';
import BasicQuerySearch from './bq_search';

// imports for the advanced query when selected
// .... these are to come

import { getQuery, clearQuery } from '../../actions/results';

class Query extends Component {

    componentWillUnmount() {
        this.props.clearQuery();
    }

    // render the main element of the container
    render() {
        return (
            <div className='panel panel-default'>
                <div className='panel-heading'>
                    <h4><strong>Compensation Data Results Query</strong></h4>
                </div>

                    <div className='panel-body'>
                    {!this.props.pos_list
                        ?
                        (
                            <div>Loading...</div>
                        )
                        :
                        this.props.pos_list.length == 1
                            ?
                            (
                                <h5>The query is currently not available for this survey.</h5>
                            )
                            :
                            (
                                <div>
                                    <BasicQuerySearch />

                                    <hr />

                                    <BasicQueryPositionList />
                                </div>
                            )
                    }

                    </div>
            </div>
        ); 
    }
}

// map the state in the Redux store to props
function mapStateToProps(state) {
    return {
        pos_list: state.results.pos_list,
    }
}

export default connect (mapStateToProps, { clearQuery })(Query);

//父容器
//./query.js
从“lodash”进口；
从“React”导入React，{Component}；
从'react redux'导入{connect}；
//选中时为基本查询导入
从“/bq_position_list”导入基本查询位置列表；
从“/bq_search”导入基本查询搜索；
//选中时导入高级查询
// .... 这些都是要来的
从“../../actions/results”导入{getQuery，clearQuery}；
类查询扩展组件{
组件将卸载（）{
this.props.clearQuery（）；
}
//呈现容器的主元素
render（）{
返回(
薪酬数据结果查询
{！这个.props.pos_列表
?
(
加载。。。
)
:
this.props.pos_list.length==1
?
(
此查询当前不可用于此调查。
)
:
(

)
}
); 
}
}
//将Redux存储中的状态映射到道具
函数MapStateTops（状态）{
返回{
位置列表：state.results.pos\u列表，
}
}
导出默认连接（MapStateTops，{clearQuery}）（查询）；

---

//同级#1容器
//./bq_search.js
从“lodash”进口；
从“React”导入React，{Component}；
从'react redux'导入{connect}；
从“../../actions/results”导入{searchTerm}；
类BasicQuerySearch扩展了组件{
//宣布该州为“任期”
建造师（道具）{
超级（道具）；
此.state={
术语：“”，
};
}
//当有人进入搜索框时，搜索框会缩小
//职位列表；还过滤掉专业字符
onInputChange（术语）{
var cleanString=term.replace（/（[`~！@$%^&*（）|+\-=？；：''，.\{\\\[\]\\/]+）/g，”；
term=cleanString.toLowerCase（）；
如果（！术语）{
术语=“”
}
this.setState（{term}）；
this.props.searchTerm（术语）；
}
//呈现向下过滤位置列表的搜索框
render（）{
const{pos_count}=this.props；
控制台日志（位置计数）；
返回(
this.onInputChange（event.target.value）}
/>
{pos_count}{pos_count==1？'Position'：'Positions'}已找到
)
}
}
函数MapStateTops（状态）{
返回{
pos\u count:state.results.pos\u count，
}
}
导出默认连接（mapStateToProps，{searchTerm}）（BasicQuerySearch）；

---

//同级#2容器
///bq\u position\u list.js
从“lodash”进口；
从“React”导入React，{Component}；
从'react redux'导入{connect}；
从“../../actions/results”导入{clearQuery，getQuery，posCount}；
类BasicQueryPostionList扩展组件{
//渲染选项并过滤结果
渲染位置选项（pos）{
//生成列表
返回映射（位置，p=>{
var选项=p.FinalCode+'-'+p.PosTitle
返回(
{option}
);
})
}
//筛选出职位列表
过滤器位置（术语、位置）{
const filtered_items=u.filter（位置，p=>
（p.FinalCode+'-'+p.PosTitle）.toLowerCase（）.match（术语）
)
返回已筛选的项目；
}
//数一数列表中有多少个职位
getCount（n）{
this.props.posCount（n.length）；
}
//呈现向下过滤位置列表的搜索框
render（）{
const{search_term，pos_list}=this.props；
常数过滤位置
// sibling #1 container
// ./bq_search.js

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';

import { searchTerm } from '../../actions/results';

class BasicQuerySearch extends Component {

    // Declare the state "term"
    constructor(props) {
        super(props);

        this.state = {
            term: '',
        };
    }

    // When someone enters into the search box, it narrows down 
    // the list of positions; also filters out speciality chars
    onInputChange(term) {
        var cleanString = term.replace(/([`~!@#$%^&*()_|+\-=?;:''",.<>\{\}\[\]\\\/]+)/g, "");
        term = cleanString.toLowerCase();
        if (!term) {
            term = ''
        }
        this.setState({ term });
        this.props.searchTerm(term);
    }

    // renders the search box that filters down the list of positions
    render() {

        const { pos_count } = this.props;

        console.log(pos_count);

        return (
            <div>
                <input 
                    className='form-control' 
                    placeholder='Enter Keyword or Position Code' 
                    value={this.state.term}
                    onInput={event => this.onInputChange(event.target.value)}
                />
                <h5><b>{pos_count}</b> {pos_count == 1 ? 'Position' : 'Positions'} Found</h5>
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        pos_count: state.results.pos_count,
    }
}

export default connect (mapStateToProps, { searchTerm })(BasicQuerySearch);

// sibling #2 container
// ./bq_position_list.js
import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';

import { clearQuery, getQuery, posCount } from '../../actions/results';

class BasicQueryPostionList extends Component {

    // renders the options and also filters down the results
    renderPositionsOptions(pos) {

        // generate the <option> list
        return _.map(pos, p => {
            var option = p.FinalCode + ' - ' + p.PosTitle
            return (
                <option
                    key={p.FinalCode}
                    value={p.FinalCode}
                >
                    {option}
                </option>
            );
        })
    }

    // filter down the list of positions
    filterPositions(term, pos) {
        const filtered_items = _.filter(pos, p => 
            (p.FinalCode + ' - ' + p.PosTitle).toLowerCase().match(term)
        )
        return filtered_items;
    }

    // count how many positions are in the list
    getCount(n) {
        this.props.posCount(n.length);
    }

    // renders the search box that filters down the list of positions
    render() {

        const { search_term, pos_list } = this.props;

        const filtered_positions = this.filterPositions(search_term, pos_list);

        this.getCount(filtered_positions);

        return (
            <div>
                <h4>Position:</h4>
                <select className='form-control'>
                    <option></option>
                    {this.renderPositionsOptions(filtered_positions)}
                </select>
            </div>
        );
    }
}

// map the state in the Redux store to props
function mapStateToProps(state) {
    return {
        pos_list: state.results.pos_list,
        survey_id: state.results.survey_id,
        search_term: state.results.search_term
    }
}

export default connect (mapStateToProps, { clearQuery, getQuery, posCount })(BasicQueryPostionList);

...

getCount(n) {
    this.props.posCount(n.length);
}

// renders the search box that filters down the list of positions
render() {

    const { search_term, pos_list } = this.props;

    const filtered_positions = this.filterPositions(search_term, pos_list);

    return (
        <div>
            <h4>Position:</h4>
            <select className='form-control'>
                <option></option>
                {this.renderPositionsOptions(filtered_positions)}
            </select>
        </div>
    );
}

componentDidUpdate(prevProps , prevState){
    const { search_term, pos_list } = this.props;
    const filtered_positions = this.filterPositions(search_term, pos_list);
    this.getCount(filtered_positions);
}

...