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

【问题标题】：ReactJS - how to fetch inside a child component with details passed on by props from a parent component?ReactJS - 如何在子组件内部获取由父组件传递的道具的详细信息？
【发布时间】：2020-08-13 07:01:21
【问题描述】：

我有一个包含表单的组件，您可以从该表单中选择三个选项。一旦选择了这些选项中的任何一个，就会在下面呈现一个子组件。该子组件需要根据输入从服务器获取数据。

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

这是我的代码：密码箱：https://codesandbox.io/s/affectionate-forest-7l0qb

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。有解决办法吗？

【问题讨论】：

标签： javascript reactjs render

【解决方案1】：

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

如果您想在 detail 属性更改时再次获取数据，您需要使用 componentDidUpdate 和 componentDidMount

componentDidMount() {
  this.getData();
}

componentDidUpdate(prevProps) {
  if (this.props.detail !== prevProps.detail) { // This prevents the update from going into an infinite loop
    this.getData();
  }
}

【讨论】：