Javascript React和React路由器，使用不同的道具渲染同一元素两次会导致使用相同道具的两个元素？

我尝试使用React with React router v4来渲染一些元素

其思想是该组件是一个来自网站的文章列表，每个路由使用不同的API键从不同的网站获取文章

我使用单个组件来显示文章，对于每个路由，我希望传递不同的API密钥

我遇到的问题是，每个路由都使用相同的API密钥，这是访问的第一个路由的密钥

源代码如下：

var APIKeys={
BBCKey:'https://newsapi.org/v1/articles?source=bbc-sport&sortBy=top&apiKey=foo'，
埃斯彭基：'https://newsapi.org/v1/articles?source=espn&sortBy=top&apiKey=foo',
fourtwokey:'https://newsapi.org/v1/articles?source=four-四个两个&sortBy=top&apiKey=foo'
}
让应用程序=（）=>(
代码

家
英国广播公司体育
四四二
ESPN

} />
} />
} />
);
导出默认应用程序
我认为原因是，
componentDidMount
只会在初始渲染之后被调用ocne，因为每个路由都使用相同的组件，所以不会再次调用
componentDidMount
。您还需要使用
componentwillreceiveprops
lifecycle方法，检查是否收到新的APIkey，然后在其中执行api调用


componentDidMount（）在创建组件后立即调用
安装。需要DOM节点的初始化应该在这里进行。如果你
需要从远程端点加载数据，这是一个好地方
实例化网络请求。此方法中的设置状态将
触发重新渲染

：

在装入组件之前调用componentWillReceiveProps（）
接收新道具。如果需要更新状态以响应
道具更改（例如，要重置道具），您可以比较this.props
和nextProps，并在中使用此.setState（）执行状态转换
这个方法

按如下方式编写组件：

export default class GetArticles extends Component {

  constructor(props) {
    super(props);
    this.state = {
      articleTitles: [],
      loading: true
    };
  }

  componentDidMount() {
    console.log('initial rendering', this.props.APIKey)
    this._callApi(this.props.APIKey);
  }

  componentWillReceiveProps(newProps){
     if(newProps.APIKey != this.props.APIKey){
        this._callApi(newProps.APIKey);
        console.log('second time rendering', newProps.APIKey)
     }
  }

  _callApi(APIKey){
    axios.get(APIKey)
      .then(response => {
        let titles = response.data.articles.map( (currentObj) => {
          return currentObj.title;
        } );

        this.setState({
          articleTitles: titles,
          loading: false
        });
      })
      .catch(error => {
        console.log('Error fetching and parsing data', error);
      });
  }

  render() {
    return (
      <div>
        <div className="main-content">
          <h1 className="main-title">Articles</h1>
          { (this.state.loading) ? <p>Loading</p> :   <ArticleList list={this.state.articleTitles} /> }
        </div>
      </div>
    );
  }
}

导出默认类GetArticles扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文章标题：[]，
加载：正确
};
}
componentDidMount（）{
console.log（'initialrendering'，this.props.APIKey）
this.\u callApi（this.props.APIKey）；
}
组件将接收道具（新道具）{
if（newProps.APIKey！=此.props.APIKey）{
这个._callApi（newProps.APIKey）；
console.log（'second-timerendering'，newProps.APIKey）
}
}
_callApi（APIKey）{
axios.get（APIKey）
。然后（响应=>{
让titles=response.data.articles.map（（currentObj）=>{
返回currentObj.title；
} );
这是我的国家({
文章标题：标题，
加载：错误
});
})
.catch（错误=>{
log（'Error fetching and parsing data'，Error）；
});
}
render（）{
返回(
文章
{（this.state.loading）？正在加载
：}
);
}
}
我原以为这与生命周期方法有关，但这并不能解决问题，我会继续玩下去。做一件事，将
console.log（this.props.APIKey）
放入render方法中，并在更改路径时显示结果。将
console.log（）放入
inside
componentDidMount
和
Component也将接收props
方法，并检查它们是否正在进行路由更改。我已将console.log（）放在这些方法中的每一个中。在render（）方法中，它返回正确的API键，但是没有输出其他console.logs（）。哦，很抱歉，
componentWillReceiveProps
函数中存在拼写错误请尝试更新的代码，并检查控制台日志值，它应该可以工作：）