Предупреждение: Невозможно выполнить обновление состояния React для несмонтированного компонента .... метод componentWillUnmount - PullRequest
Новая
       70

Предупреждение: Невозможно выполнить обновление состояния React для несмонтированного компонента .... метод componentWillUnmount

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

Я очень новичок в React и React Native , и я получаю это предупреждение при переключении экранов. Кроме того, console.log продолжает повторяться бесконечно, как мне это исправить? 

class DecodeScreen extends Component {
  state = {
    data: this.props.navigation.getParam("data", "NO-QR"),
    bookData: '',
    bookFound: false
 }

 bookSearch = () => {
      query = `https://librarydb-19b20.firebaseio.com/books/${this.state.data}.json`,
      axios.get(query)
           .then((response) => {
               const data = response.data ? response.data : false
                   console.log(data)
                   if (data) {
                    this.setState({
                        bookData: data,
                        bookFound: true
                    })
                }
            }).catch((error) => {

                this.setState({
                    bookFound: false
                })
            })
  }
  renderContent = () => {
    if (this.state.bookFound) {
        return( 
          <View>
          <TextH5>{this.state.bookData.title}</TextH5>
          <TextH5>{this.state.bookData.author}</TextH5>
          <TextH5>{this.state.bookData.publisher}</TextH5>
          <TextH5>{this.state.bookData.isbn}</TextH5>
          </View>
        )
      }
      else {
        return <TextH5>beer not found</TextH5>
      } 
}
componentDidMount() {
  this.bookSearch()
}

  render() {
    {this.bookSearch()}
  return (
    <Container>
      <TextH5>{this.state.data}</TextH5>
      {this.renderContent()}
    </Container>
  );
  }}
export default DecodeScreen;

вывод console.log предупреждение

Ответы [ 2 ]

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

Вы можете попробовать этот подход, чтобы увидеть, решит ли он проблему. 

 isMounted = false;
class DecodeScreen extends Component {
  state = {
    data: this.props.navigation.getParam("data", "NO-QR"),
    bookData: "",
    bookFound: false,
  };

  bookSearch = () => {
    this.isMounted = true;
    (query = `https://librarydb-19b20.firebaseio.com/books/${this.state.data}.json`),
      axios
        .get(query)
        .then((response) => {
          const data = response.data ? response.data : false;
          console.log(data);
          if (data) {
            if (this.isMounted) {
              this.setState({
                bookData: data,
                bookFound: true,
              });
            }
          }
        })
        .catch((error) => {
          this.setState({
            bookFound: false,
          });
        });
  };
  renderContent = () => {
    if (this.state.bookFound) {
      return (
        <View>
          <TextH5>{this.state.bookData.title}</TextH5>
          <TextH5>{this.state.bookData.author}</TextH5>
          <TextH5>{this.state.bookData.publisher}</TextH5>
          <TextH5>{this.state.bookData.isbn}</TextH5>
        </View>
      );
    } else {
      return <TextH5>beer not found</TextH5>;
    }
  };
  componentDidMount() {
    this.isMounted = true;
    this.bookSearch();
  }

  componentWillUnmount() {
    this.isMounted = false;
  }

  render() {
    {
      this.bookSearch();
    }
    return (
      <Container>
        <TextH5>{this.state.data}</TextH5>
        {this.renderContent()}
      </Container>
    );
  }
}
export default DecodeScreen;
0 голосов
/ 13 апреля 2020

Вы должны использовать componentDidMount метод, чтобы сделать вызов API 

componentDidMount() {
    this.bookSearch()
}

Читать о методе жизненного цикла реакции

...