Реагировать - неизменное нарушение: превышена максимальная глубина обновления

У меня есть функция для установки моего состояния из другого класса, но я получил следующую ошибку

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

А вот мой код выглядит как

  constructor(props) {
    super(props)
    this.state = { loading: true, showAction: false }
    setTimeout(() => {
      StatusBar.setBackgroundColor(primary)
    }, 100)
  }

  async componentWillMount() {
    await Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      Ionicons: require("@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf"),
    });
    this.setState({ loading: false });
  }

  setShowAction = (isShowAction) => {
    console.log(isShowAction)
    this.setState({
      showAction: isShowAction
    })
  }

...

<ChatListScreen onAction={(isShowAction) => this.setShowAction(isShowAction)}/>

...

const ChatListScreen = ({ onAction }) => {

    return (
        <ChatList onAction={(isShowAction) => onAction(isShowAction)}/>
    )
}

...

const ChatList = ({ onAction }) => {
    const [selectMode, setSelectMode] = useState(false)
    const chatListDummy = []
    const [selectedItem, setSelectedItem] = useState([])
    {selectMode ? onAction(true) : onAction(false)}
    return (
        <FlatList
                data= {chatListDummy}
                keyExtractor= {chat => chat.id}
                renderItem= {({item}) => {
                }}/>
    )
}

export default ChatList

Кто-нибудь может помочь?


react-native reactjs react-state-management
person Hanif Nr    schedule 28.04.2020    source источник
comment
не могли бы вы показать нам ChatListScreen коды?   -  person MBehtemam    schedule 28.04.2020
comment
Вероятно, вам нужно использовать функцию стрелки в вашем коде. Когда вы не привязываете свои методы должным образом, реакция начинает вызывать их непрерывно ... что приводит к ошибкам превышения максимальной глубины обновления.   -  person Imjaad    schedule 28.04.2020
comment
{selectMode? onAction (true): onAction (false)} привет, где вы это используете? в рендере или функции или жизненном цикле?   -  person morteza moradi    schedule 28.04.2020
comment
как насчет помещения {selectMode ? onAction(true) : onAction(false)} в useEffect   -  person MBehtemam    schedule 28.04.2020

Ответы (2)


arrow_upward
3
arrow_downward

увидеть мое решение

const ChatListScreen = ({ onAction }) => {

   return (
       <ChatList onAction={(isShowAction) => onAction(isShowAction)}/>
   )
}
const ChatList = ({ onAction }) => {
   const [selectMode, setSelectMode] = useState(false)
   const [selectedItem, setSelectedItem] = useState([])
   //i dont know where are you using this actally you most use this in a lifesycle or a function
   // {selectMode ? onAction(true) : onAction(false)}
function onClick(){
   selectMode ? onAction(true) : onAction(false)

}
//or a lifecycle
useEffect(()=>{
   selectMode ? onAction(true) : onAction(false)

},[])
return (<div onClick ={onClick} >{"your content"}</div>)
person morteza moradi    schedule 28.04.2020

arrow_upward
1
arrow_downward

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

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

  1. Вы передаете анонимную функцию как опору вашему компоненту.
  2. Когда компонент получает эту функцию, он не может сравнить его с предыдущим состоянием и, следовательно, повторно визуализирует ваш компонент.
  3. Внутри вашей анонимной функции вы обновляете свое состояние. Обновление вашего состояния заставит React снова выполнить рендеринг компонента.
    this.setState({
      showAction: isShowAction
    }) //this portion is mainly responsible for the error
  1. Следовательно, этот цикл продолжается до порогового значения, пока React не выдаст ошибку Maximum update depth exceeded.
person Anus Kaleem    schedule 28.04.2020
comment
Хорошо, а как тогда должно быть? потому что в этом случае я хочу установить состояние из его дочернего компонента - person Hanif Nr; 28.04.2020
comment
Управляйте состоянием своего приложения централизованно с помощью любого инструмента управления состоянием, затем сопоставляйте свое состояние с реквизитами и используйте их в качестве реквизитов в своем компоненте. - person Anus Kaleem; 28.04.2020