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

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

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

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

Превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает 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

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

Ответы [ 2 ]

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

см. Мое решение 

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>)
0 голосов
/ 28 апреля 2020

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

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

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