ReactJS

Question

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

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

这是我的代码： codesandbox: 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（通过 selecting "--"）然后通过 selecting 另一个选择再次将其设置为 true 是有道理的，全部在努力重新呈现 childComponent。有解决办法吗？

Answer 1

componentDidMount 在组件 mounted 时运行，即它第一次出现时。通过选择另一个值更改道具后，它不会再次 re-mount 组件，它只会更新道具并 re-renders 它。

如果您想在 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();
  }
}

ReactJS - 如何在子组件内部获取父组件的 props 传递的详细信息？

ReactJS - how to fetch inside a child component with details passed on by props from a parent component?

javascript

render