为什么我的React Native类组件返回错误:this.setState不是函数

Question

下面是我的类组件的代码：

export class RenderButtons extends React.Component {
constructor(props) {
super(props);
this.state = {
isCollapsed: false,
};
}
render() {
var buttonText = this.state.isCollapsed === true ? "Expand" : "Collapse";
// helper components
function _renderSquareButton({ item }) {
return (
<SquareButton
name={item.name}
onPress={() => this.props.pressHandler()}
/>
);
}
function _header(name) {
return (
<View style={views.nameAndPriceContainer}>
<Text style={text.headerTwo}>{name}</Text>
<Button title={buttonText} onPress={() => toggleCollapsed()} />
</View>
);
}
function toggleCollapsed() {
this.setState((currentState) => {
return { isCollapsed: !currentState.isCollapsed };
});
}
return (
<FlatList
listKey={this.props.name}
ListHeaderComponent={_header(this.props.name)}
data={this.props.data}
extraData={this.props.data}
renderItem={_renderSquareButton}
numColumns={4}
refreshing={true}
extraData={this.props.data}
keyExtractor={(item, index) => item.name + index}
ListEmptyComponent={null}
/>
);
}
}

当我试图按下展开/折叠按钮并说"；undefined不是函数(正在计算"this.setState(｛…｝("(；所以我认为它有toggleCollapsed函数。

编辑，谢谢大家问题已经解决了。以下是感兴趣的人的工作代码：

export class RenderButtons extends React.Component {
constructor( props ){
super( props );
this.state = {
isCollapsed:false,
}
this._renderSquareButton = this._renderSquareButton.bind(this); 
this._header = this._header.bind(this);
this.toggleCollapsed= this.toggleCollapsed.bind(this);
}
// helper components
_renderSquareButton({ item }){
return <SquareButton name={item.name} onPress={()=>this.props.pressHandler()} />
}
_header( name ){
var buttonText = this.state.isCollapsed === true ? 'Expand' : 'Collapse';
return(
<View style={ views.nameAndPriceContainer }>
<Text style={ text.headerTwo }>{ name }</Text>
<Button title= { buttonText } onPress={()=> this.toggleCollapsed() } />
</View>
)
}

toggleCollapsed(){
this.setState( currentState => {
return { isCollapsed: !currentState.isCollapsed };
});
}

render(){
switch( this.state.isCollapsed ){
case false:
return (
<FlatList
listKey={ this.props.name }
ListHeaderComponent={this._header( this.props.name )}
data={ this.props.data } extraData={ this.props.data }
renderItem={ this._renderSquareButton }
numColumns={ 4 }
refreshing={ true }
extraData={ this.props.data }
keyExtractor={( item, index )=> item.name + index }
ListEmptyComponent={ null }
/>
)
break;
case true:
return this._header( this.props.name )
}
}
}

Answer 1

只需要在constructor中绑定函数toggleCollapsed，如下所示：

constructor( props ){
super( props );
this.state = {
isCollapsed:false,
}
this.toggleCollapsed = this.toggleCollapsed.bind(this);
}

这应该能解决你的问题。

无论如何，我建议您以这种方式重构代码：

export class RenderButtons extends React.Component {
constructor( props ){
super( props );
this.state = {
isCollapsed:false,
}
this._renderSquareButton = this._renderSquareButton.bind(this); 
this._header = this._header.bind(this);
this.toggleCollapsed= this.toggleCollapsed.bind(this);
}
// helper components
_renderSquareButton({ item }){
return <SquareButton name={item.name} onPress={()=>this.props.pressHandler()} />
}
_header( name ){
var buttonText = this.state.isCollapsed === true ? 'Expand' : 'Collapse';
return(
<View style={ views.nameAndPriceContainer }>
<Text style={ text.headerTwo }>{ name }</Text>
<Button title= { buttonText } onPress={()=> this.toggleCollapsed() } />
</View>
)
}

toggleCollapsed(){
this.setState( currentState => {
return { isCollapsed: !currentState.isCollapsed };
});
}

render(){
return (
<FlatList
listKey={ this.props.name }
ListHeaderComponent={this._header( this.props.name )}
data={ this.props.data } extraData={ this.props.data }
renderItem={ this._renderSquareButton }
numColumns={ 4 }
refreshing={ true }
extraData={ this.props.data }
keyExtractor={( item, index )=> item.name + index }
ListEmptyComponent={ null }
/>
)
}
}

Answer 2

将ToggleCollapsed更改为以下

function toggleCollapsed(){
this.setState({
isCollapsed: !this.state.isCollapsed;
});
}

Answer 3

您需要更新一些内容：

• 将toggleCollapsed移动到render外部
• 更新onPress={this.toggleCollapsed}
• 在this.state之后，在constructor中添加this.toggleCollapsed = this.toggleCollapsed.bind(this)

Answer 4

import React from "react";
const [collapsed, setCollapsed] = React.useState(false);

也许这可以帮助你

也不需要将bool与===true进行比较。

let buttonText = this.state.isCollapsed ? 'Expand' : 'Collapse';