Javascript ReactJS-如何在子组件内部获取由道具从父组件传递的详细信息？

我有一个组件，它有一个表单，您可以从该表单中选择三个选项。选择其中一个选项后，将在下面渲染子组件。此子组件需要根据输入从服务器获取数据

我遇到的问题是，尽管我能够将数据向下传递给子组件，但子组件无法获取数据，除非我在父组件上选择默认选项，然后选择另一个值

这是我的密码： 代码沙盒：

App.js

import React, { Component } from "react";
import ChildComponent from "./ChildComponent";

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

    this.state = {
      value: "",
      prevValue: "",
      submitted: false
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ prevValue: this.state.value });
    this.setState({ value: event.target.value });
    this.setState({ submitted: true });
    event.preventDefault();
  }

  render() {
    var renderingBool = false;

    if (this.state.submitted) {
      if (this.state.value !== "--") {
        renderingBool = true;
      }
    }

    return (
      <div className="Base">
        <h1> By Productline </h1>
        <form>
          <label className="label">
            Select Workflow: {"               "}
            <select value={this.state.value} onChange={this.handleChange}>
              <option value="--"> -- </option>
              <option value="Lebron_James">Lebron James</option>
              <option value="Kobe_Bryant">Kobe Bryant</option>
              <option value="Lamar_Jackson">Lamar Jackson</option>
            </select>
          </label>
        </form>

        <div>
          {renderingBool && (
            <ChildComponent
              history={this.props.history}
              detail={this.state.value}
            />
          )}
        </div>
      </div>
    );
  }
}

export default App;

ChildComponent.js

import React, { Component } from "react";

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

    this.state = {
      data: ""
    };

    this.getData = this.getData.bind(this);
  }

  componentDidMount() {
    this.getData();
  }

  getData = () => {
    var url = "https://en.wikipedia.org/wiki/" + this.props.detail;
    console.log(url);

    fetch(url)
      .then((results) => results.text())
      .then((results) => this.setState({ data: results }))
      .catch((err) => console.log(err));
  };

  render() {
    return <h1>{this.props.detail}</h1>;
  }
}

export default ChildComponent;

如果在调用子组件之前没有布尔值，我将无法渲染它。因此，我必须通过选择将renderingBool设置为false，然后通过选择另一个选项再次将其设置为true，这一切都是为了重新渲染childComponent。是否有解决方法？

当安装组件时，即当组件第一次出现时，组件安装会运行。通过选择另一个值更改道具后，它不会再次重新安装组件，只会更新道具并重新渲染

如果要在细节属性更改时再次获取数据，则需要使用componentDidUpdate和componentDidMount

组件安装{ 这是getData； } componentDidUpdateprevProps{ 如果this.props.detail！==prevProps.detail{//这将防止更新进入无限循环 这是getData； } } 组件安装时，即首次出现时，组件安装运行。通过选择另一个值更改道具后，它不会再次重新安装组件，只会更新道具并重新渲染

如果要在细节属性更改时再次获取数据，则需要使用componentDidUpdate和componentDidMount

组件安装{ 这是getData； } componentDidUpdateprevProps{ 如果this.props.detail！==prevProps.detail{//这将防止更新进入无限循环 这是getData； } }