Почему нельзя изменить состояние в методе рендеринга. Как лучше всего изменить состояние перед вызовом метода рендеринга?

Question

Я пытаюсь изменить состояние в методе render, но он показывает:

Ошибка: превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.

class Test extends Component {
    state = { 
        name:[],

    }



    render() {
        this.setState({name:this.props.data})


        return(
          <div>
              {this.state.name.map(e=>(
                  <h3>{e}</h3>
              ))}
          </div>
      );  
    }
}

Answer 1

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

Установить некоторое начальное состояние в конструкторе

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.data,
    };
  }

  render() {
    return (
      <div>
        {this.state.name.map(e => (
          <h3>{e}</h3>
        ))}
      </div>
    );
  }
}

Или установить состояние в функции жизненного цикла

class Test extends Component {
  state = {
    name: [],
  };

  componentDidMount() {
    this.setState({ name: this.props.data });
  }

  render() {
    return (
      <div>
        {this.state.name.map(e => (
          <h3>{e}</h3>
        ))}
      </div>
    );
  }
}

Answer 2

Никогда не устанавливайте состояние внутри функции рендеринга, так как это может создать побочный эффект и в конечном итоге создаст бесконечный цикл рендеринга. Реагировать на вызовы функции render () каждый раз, когда происходит изменение состояния. Выполните заданное состояние вне функции рендеринга в функции-обработчике события, которая вызывается на основе взаимодействия пользователя с пользовательским интерфейсом.

Ниже приведен функциональный компонент, который изменяет текст кнопки, когда пользователь нажимает кнопку.

const DemoApp = (props) => {
          const [state, setState] = useState(false);

          const handleButtonPress = () => {
          setState(true);
          }

return(
      <Button
          onPress={handleButtonPress}
          title={state ? 'Pressed' : 'click Here'}
          color="#841584"

      />
     )