反应setState函数不起作用

debugcn 发表于 Dev

奇迹

我是React的新手，我一直在尝试在react中应用事件处理，但是在onclick事件上遇到一些问题。当“显示德国”按钮被称为“页面”时，则仅锁定加载...

这是我写的代码..

class App extends Component {
    constructor(props) {
        super(props);

        this.state = { articles: [],
                isLoaded:false ,
                country:'us'
                }
       
        this.change = this.change.bind(this);
    }


    componentDidMount() {
        const APIurl = `https://newsapi.org/v2/top-headlines?country=${this.state.country}&apiKey=${API_KEY}`;
        fetch(APIurl)
            .then(response => response.json())
            .then(json => {
                this.setState({
                    articles: json.articles,
                    isLoaded:true
                })
            })
    }
   // function to change the state
    change()
    {
        this.setState({
            articles: [],
            isLoaded:false ,
            country:"de"

        })
    }   
   
    render() {
      const { isLoaded,articles } = this.state;
      if(!isLoaded)
      {
          return (<h1>Loading....</h1>)
      }
     
        return (
            <div>
                <Navbar/>
                <button onClick={this.change}>show me of germany</button>
                <ul>
                    {articles.map(item=>(
                           <News item={item}/>
                    ))}
                </ul>
            </div>
       );
   }
}
export default App;

希望你理解问题

基里尔·斯科马洛夫斯基（Kirill Skomarovskiy）

您必须再次请求。

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      articles: [],
      isLoaded: false,
      country:'us'
    }
       
    this.change = this.change.bind(this);
  }


  componentDidMount() {
    fetchData(this.state.country);
  }

  componentDidUpdate(prevProps, prevState) {
    const { country: prevCountry } = prevState;
    const { country: nextCountry } = this.state;

    if (prevCountry !== nextCountry) {
      fetchData(nextCountry);
    }
  }

  change() {
    this.setState({ country: 'de' });
  }

  fetchData(country) {
    this.setState({ articles: [], isLoaded: false });

    fetch(
      `https://newsapi.org/v2/top-headlines?country=${country}&apiKey=${API_KEY}`
    )
      .then(res => res.json())
      .then(({ articles }) => {
        this.setState({ articles, isLoaded: true });
      })
      .catch(console.error);
  }
   
  render() {
    //...
  }
}

export default App;

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。