Javascript ReactJS无法通过onClick重新加载组件

我用react.js制作了一个简单的应用程序，每次点击这个按钮，这个建议都会随机出现 问题单击一次后无法重新渲染组件 如何在每次单击按钮时获得新位置

将.js放置在获取API以获取数据的位置

state = { loading: true, person: null };
  async componentDidMount() {
    let Xyurl = "https://cors-anywhere.herokuapp.com/";
    let url =
      "https://wainnakel.com/api/v1/GenerateFS.php?uid=26.2716025,50.2017993&g et_param=value";

    let response = await fetch(Xyurl + url);
    let data = await response.json();
    this.setState({ place: data, loading: false });

  }
  render() {
    return (
      <div>
        <div>
          {this.state.loading || !this.state.place ? (
            <div>loading......</div>
          ) : (
            <div className="PlcseContiner">
              <img alt="description" src= . 
              {this.state.place.image[0]} />
                {this.state.place.name}

        </div>
      </div>
    );

state={loading:true，person:null}；
异步组件didmount（）{
让Xyurl=”https://cors-anywhere.herokuapp.com/";
让url=
"https://wainnakel.com/api/v1/GenerateFS.php?uid=26.2716025，50.2017993&g等参数=值”；
let response=wait fetch（Xyurl+url）；
让data=wait response.json（）；
this.setState（{place:data，load:false}）；
}
render（）{
返回(
{this.state.loading | | |！this.state.place(
加载。。。。。。
) : (
{this.state.place.name}
);

建议“从何处开始”按钮可以渲染位置

class Suggestion extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
    this.handleClicked = this.handleClicked.bind(this);
  }
  handleClicked(event) {
    event.preventDefault();
    this.setState({
      visible: true
    });
  }

  generateplace() {
    if (this.state.visible) {
      return <Place />;
    }
    return null;
  }

  render() {
    return (
      <div className="main-button">
        <Button onClick={this.handleClicked} color="warning" className="Btn">
          suggestion
        </Button>
        {this.generateplace()}
      </div>
    );
  }

类建议扩展组件{
建造师（道具）{
超级（道具）；
此.state={
可见：假
};
this.handleClicked=this.handleClicked.bind（this）；
}
把手舔（事件）{
event.preventDefault（）；
这是我的国家({
可见：正确
});
}
生成位置（）{
if（this.state.visible）{
返回；
}
返回null；
}
render（）{
返回(
建议
{this.generateplace（）}
);
}

---

}

您可以使用组件更新从父级控制它 因此，您需要向

Place

组件添加道具

建议:

class Suggestion extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      refresh: 1
    };
    this.handleClicked = this.handleClicked.bind(this);
  }
  handleClicked(event) {
    event.preventDefault();
    this.setState({
      visible: true,
      refresh: this.state.refresh + 1
    });
  }

  generateplace() {
    if (this.state.visible) {
      return <Place refresh={this.state.refresh} />;
    }
    return null;
  }

  render() {
    return (
      <div className="main-button">
        <Button onClick={this.handleClicked} color="warning" className="Btn">
          suggestion
        </Button>
        {this.generateplace()}
      </div>
    );
  }

---

如何将getPlace传递给按钮它不是同一个组件您能告诉我组件之间的关系吗？我会将组件导入建议组件中如果您在建议组件中呈现建议，您可以将

getPlace

函数传递给建议，并在按下按钮时调用

getPlace

。编辑我对您的cas的回答e、 如果不起作用，我希望它能起作用。告诉我

componentDidMount() {
    this.getPlace()
}

componentWillUpdate(nextProps, nextState) {
    this.getPlace();
}

getPlace = async() => {
    let Xyurl = "https://cors-anywhere.herokuapp.com/";
    let url =
          "https://wainnakel.com/api/v1/GenerateFS.php?uid=26.2716025,50.2017993&g et_param=value";

    let response = await fetch(Xyurl + url);
    let data = await response.json();
    this.setState({ place: data, loading: false });
}