Reactjs 尝试设置新状态值时，resact this.setState函数会出错_Reactjs

Reactjs 尝试设置新状态值时，resact this.setState函数会出错

reactjs

Reactjs 尝试设置新状态值时，resact this.setState函数会出错,reactjs,Reactjs,当我尝试使用this.setState函数更新组件的状态时（有回调或没有回调），它会给出以下警告，然后出现如下所示的错误警告：更新（setState、replaceState或forceUpdate）是从更新函数内部计划的。更新功能应该是纯的，没有副作用。考虑使用组件Debug更新或回调。未捕获类型错误：itemValue.toLowerCase不是函数 import React from 'react'; import ReactAutocomplete from 'react-auto

当我尝试使用this.setState函数更新组件的状态时（有回调或没有回调），它会给出以下警告，然后出现如下所示的错误

警告：更新（setState、replaceState或forceUpdate）是从更新函数内部计划的。更新功能应该是纯的，没有副作用。考虑使用组件Debug更新或回调。

未捕获类型错误：itemValue.toLowerCase不是函数

import React from 'react'; 
import ReactAutocomplete from 'react-autocomplete';
export default class AddMedicine extends React.Component {

constructor (props) {
    super(props)
    this.state = {
        autocompleteData: props.list,
        bid: '',
        formId: '',
        formsOfBrand: []
    };

    this.renderBrandItem = this.renderBrandItem.bind(this);
    this.onChangeBrand = this.onChangeBrand.bind(this);
    this.onSelectBrand = this.onSelectBrand.bind(this);
    this._getFormsByBID = this._getFormsByBID.bind(this);

    this.renderFormItem = this.renderFormItem.bind(this);
    this.onChangeForm = this.onChangeForm.bind(this);
    this.onSelectForm = this.onSelectForm.bind(this);

}

renderBrandItem(item, highlighted) {
    return <div
                key={item.bid}
                style={{ backgroundColor: highlighted ? '#eee' : 'transparent'}}
            >
                {item.brand_name}
            </div>

}

onChangeBrand(e) { this.setState({
        bid: e.target.value,
        formsOfBrand : ['dd', 'dfsd']
    })
}

onSelectBrand(bid) {
    this.setState( (prevState) => {
            let newState = {...prevState};
            newState.bid = bid;
            newState.formsOfBrand = this._getFormsByBID(bid);
            console.log(newState);
            return newState;
    });
}

componentDidUpdate() {}


_getFormsByBID(id){
   let brand = this.state.autocompleteData.filter(brand => {
            console.log(brand); console.log(id);
            return (brand.bid == id)? true : false; }
       );
    brand = brand[0];
   console.log(brand);
   return brand.forms;
}

renderFormItem(item, highlighted) {
    return <div
        key={Object.keys(item)[0]}
        style={{ backgroundColor: highlighted ? '#eee' : 'transparent'}}
    >
        {item[Object.keys(item)[0]]}
    </div>

}

onChangeForm(e) { this.setState({ formId: e.target.value }) }

onSelectForm(formId) { this.setState({ formId: formId }) }

render() {
    return (
        <React.Fragment>

            <ReactAutocomplete
                items={this.state.autocompleteData}
                getItemValue={item => item.bid}
                renderItem={this.renderBrandItem}
                value={this.state.bid}
                onSelect={this.onSelectBrand}
            />


            <select>
                {this.state.formsOfBrand.forEach((form) =>
                    <option value={Object.keys(form)[0]}>{form[Object.keys(form)[0]]}</option>
                )}
            </select>

        </React.Fragment>


    )
}

从“React”导入React；
从“react autocomplete”导入ReactAutocomplete；
导出默认类AddReact.Component{
建造师（道具）{
超级（道具）
此.state={
自动完成数据：props.list，
出价：''，
formId:“”，
formsOfBrand:[]
};
this.renderBrandItem=this.renderBrandItem.bind（this）；
this.onChangeBrand=this.onChangeBrand.bind（this）；
this.onSelectBrand=this.onSelectBrand.bind（this）；
this.\u getFormsByBID=this.\u getFormsByBID.bind（this）；
this.renderFormItem=this.renderFormItem.bind（this）；
this.onChangeForm=this.onChangeForm.bind（this）；
this.onSelectForm=this.onSelectForm.bind（this）；
}
renderBrandItem（项目，高亮显示）{
返回
{项目.品牌名称}
}
onChangeBrand（e）{this.setState({
出价：即目标价值，
品牌形式：['dd'，'dfsd']
})
}
onSelectBrand（投标）{
this.setState（（prevState）=>{
让newState={…prevState}；
newState.bid=投标；
newState.formsOfBrand=此。_getFormsById（投标）；
console.log（newState）；
返回新闻状态；
});
}
componentDidUpdate（）{}
_GetFormsById（id）{
让brand=this.state.autocompleteData.filter（brand=>{
console.log（品牌）；console.log（id）；
返回（brand.bid==id）？真：假；}
);
品牌=品牌[0]；
控制台日志（品牌）；
返回品牌表格；
}
renderFormItem（项目，高亮显示）{
返回
{item[Object.keys（item）[0]]}
}
onChangeForm（e）{this.setState（{formId:e.target.value}）}
onSelectForm（formId）{this.setState（{formId:formId}}
render（）{
返回(
项目名称：}
renderItem={this.renderBrandItem}
值={this.state.bid}
onSelect={this.onSelectBrand}
/>
{this.state.formsOfBrand.forEach（（form）=>
{form[Object.keys（form）[0]]}
)}
)
}

}

为此添加代码。_getFormsById（）

onSelect

需要一个参数。你有这样的：

onSelect={this.onSelectBrand}

…你不需要这个：

onSelect={bid=>this.onSelectBrand（bid）}

？@SethLutske不，只要

onSelect

传递了

onSelectBrand

期望的值就可以了。Mohsin，你能把出现

itemValue.toLowerCase

错误的代码包括进去吗？如果不太麻烦的话，您也可以共享

AddMedicine

@DrewReese的整个组件代码。我在问题描述中添加了完整的代码。实际上，error itemValue.toLowerCase是从内部react autocomplete（）生成的。我确信我犯了一个我无法理解的愚蠢的小错误。我感谢你的帮助。我已经准备好了这个函数。如果错误是由

react autocomplete

引起的，那么可能您没有以正确的类型

string

传递数据。我们可以深入研究它。为此添加代码。_getFormsById（）

onSelect