我正在try 从渲染视图重构以下代码:

<Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChange.bind(this,false)} >Retour</Button>

绑定在构造函数中的版本.原因是渲染视图中的绑定会给我带来性能问题,尤其是在低端手机上.

我已经创建了以下代码,但我经常会遇到以下错误(很多).看起来应用程序进入了一个循环:

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

下面是我使用的代码:

var React = require('react');
var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
var Button = require('react-bootstrap/lib/Button');
var Form = require('react-bootstrap/lib/Form');
var FormGroup = require('react-bootstrap/lib/FormGroup');
var Well = require('react-bootstrap/lib/Well');

export default class Search extends React.Component {

    constructor() {
        super();

        this.state = {
            singleJourney: false
        };

        this.handleButtonChange = this.handleButtonChange.bind(this);
    }

    handleButtonChange(value) {
        this.setState({
            singleJourney: value
        });
    }

    render() {

        return (
            <Form>

                <Well style={wellStyle}>

                    <FormGroup className="text-center">

                        <ButtonGroup>
                            <Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChange(false)} >Retour</Button>
                            <Button href="#" active={this.state.singleJourney} onClick={this.handleButtonChange(true)} >Single Journey</Button>
                        </ButtonGroup>
                    </FormGroup>

                </Well>

            </Form>
        );
    }
}

module.exports = Search;

推荐答案

看起来您在渲染方法中意外调用了handleButtonChange方法,您可能希望改为使用onClick={() => this.handleButtonChange(false)}.

如果不想在onClick处理程序中创建lambda,我认为需要有两个绑定方法,每个参数一个.

constructor人中:

this.handleButtonChangeRetour = this.handleButtonChange.bind(this, true);
this.handleButtonChangeSingle = this.handleButtonChange.bind(this, false);

render法中:

<Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChangeSingle} >Retour</Button>
<Button href="#" active={this.state.singleJourney} onClick={this.handleButtonChangeRetour}>Single Journey</Button>

Reactjs相关问答推荐

如何实现黑暗模式 map ?

如何防止使用useCallback和memo重新渲染

使用useReducer时,props 未从父级传递给子或孙级

后端关闭时如何在REACTION AXIOS拦截器中模拟数据?

一键MUI导出

React Router:在没有手动页面刷新的情况下,路由不会更新内容

子路径上未定义useMatches句柄

如何在物料界面react 的多选菜单中设置最大 Select 数限制

错误:操作必须是普通对象.使用自定义中间件进行异步操作. Redux/工具包

滚动视图样式高度没有任何区别

如何使用 App Router 和服务器组件在 Next.js 13 中实现分页

在 React 中使用forwardRef时无法声明自定义属性

强制 useEffect 仅运行一次

如何在我的自定义主题中样式化MUI TreeItem组件

如何渲染子路径并触发react 路由父加载器?

Recharts 笛卡尔网格 - 垂直线和水平线的不同样式

响应式媒体 React Tailwind

如何将值从下拉列表传递到 select 上的输入?响应式JS

如何使图标适合 react-bootstrap 中的行元素

未捕获的错误:操作必须是使用 redux/toolkit 的普通对象