Я пытаюсь вызвать функцию switch_fun c. Но как-то не удалось получить желаемый результат - PullRequest
Новая
       62

Я пытаюсь вызвать функцию switch_fun c. Но как-то не удалось получить желаемый результат

0 голосов
/ 28 апреля 2020 

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
  
<div id="root"></div>

<script type="text/babel">
class Hello extends React.Component {
  constructor(props) {
        super(props);
        this.state = { myStr: "Initial state" };
        this.switch_func = this.switch_func.bind(this);
    }
    
    switch_func = () => {
  // the setState if commented ...the initial state of myStr is executed ..meaning the function is called however the setState method doesnt work . Can anyone tell why this is happening?
  
    	this.setState({ myStr: "yess"});
      return (
            <div>
                <h3>{this.state.myStr}</h3>
            </div>
        );
    }
    

    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
				{this.switch_func()}
            </div>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'))
</script>

</body>
</html>

Даже после привязки функции switch_fun c она не выполняется, и состояние myStr остается тем же, что было инициализировано. Пожалуйста, помогите с тем, где кодирование не дает желаемого результата.

Может кто-нибудь сказать, почему здесь не работает метод setState?

Желаемым выводом является то, что состояние myStr изменяется на - "Да четыре! "

class MyClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {myStr: "Initial state"};
        this.switch_func = this.switch_func.bind(this);
    }
    switch_func = ()=> {
        this.setState({myStr: "In function"});
        switch (1 + 3) {
            case 2 + 2:
                this.setState({ myStr: "Yes its four!"});
                break;
            default:
                this.setState({ myStr: "Oops! default"});
        }

    return(
        <div>
            <h3>{this.state.myStr}</h3>
        </div>
    );
  }

    render(){
        return (
            <div>
            <h1>Hello, world!</h1>
            {this.switch_func()}
        </div>
        );
    }
}

ReactDOM.render(
    <MyClass />,
    document.getElementById('root')
);

Ответы [ 2 ]

0 голосов
/ 28 апреля 2020

Вы не должны вызывать функцию switch внутри рендера, так как это может привести к тому, что ваш компонент приземлится в бесконечном l oop - каждый раз, когда он рендерится, состояние меняется так ... Он рендерится снова.

Кроме того, очень опасно смешивать рендеринг и обновление состояния в одной функции - это никогда не должно выполняться , так как это может вызвать много утечек при оптимизации.

Переместить вызов функции в другой метод Например, componentDidMount(): 

class MyClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {myStr: "Initial state"};
    }

    componentDidMount() {
      switchFunc();
    }

    switchFunc = () => {
        switch (1 + 3) {
            case 2 + 2:
                this.setState({ myStr: "Yes its four!"});
                break;
            default:
                this.setState({ myStr: "Oops! default"});
        }
    }

    render(){
        return (
            <div>
                <h1>Hello, world!</h1>
                <div>
                    <h3>{this.state.myStr}</h3>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
  <MyClass />,
  document.getElementById('root')
);

componentDidMount - это специальный метод (как render), предоставляемый React и позволяющий управлять поведением компонента при монтировании компонента. Подробнее об этих методах здесь: https://reactjs.org/docs/state-and-lifecycle.html

Также обратите внимание, что отделение рендеринга myStr от метода render в настоящее время является излишним - просто используйте его непосредственно в render Метод, как в моем примере.

Просто примечание - попробуйте использовать camelCased имена для ваших методов, чтобы они соответствовали остальной части кода (как в моем обновленном примере).

Другая информация по оптимизации связывания - вы добавили .bind() вызов к своему конструктору - он не нужен, так как ваш switchFunc не используется ни в каком контексте вне класса (следовательно, его this всегда указывает на класс, так что вам не нужно снова .bind() контекст). Кроме того, что более важно - вы написали ее как лямбда-функцию (() => {}), а не как нормальную функцию - лямбда-выражения не имеют своего контекста и не наследуют родительский контекст там, где они определены - следовательно, всегда будет указывать на класс this контекст без какой-либо явной привязки

0 голосов
/ 28 апреля 2020

Вы просто должны вызвать функцию, добавив скобки в конце. Это приведет к бесконечному l oop, хотя каждый раз при рендеринге компонента он будет обновлять состояние, что, в свою очередь, будет вызывать повторный рендеринг и т. Д. 

class MyClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = { myStr: "Initial state" };
        this.switch_func = this.switch_func.bind(this);
    }
    switch_func = () => {
        switch (1 + 3) {
            case 2 + 2:
                this.setState({ myStr: "Yes its four!" });
                break;
            default:
                this.setState({ myStr: "Oops! default" });
        }

        return (
            <div>
                <h3>{this.state.myStr}</h3>
            </div>
        );
    }

    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                {this.switch_func()}
            </div>
        );
    }
}

ReactDOM.render(
    <MyClass />,
    document.getElementById('root')
);
...