ReactJS - 如何在子组件中获取父组件的 props 传递的详细信息? [英] ReactJS - how to fetch inside a child component with details passed on by props from a parent component?

问题描述

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

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

这是我的代码:代码和盒子:https://codesandbox.io/s/affectate-forest-7l0qb

App.js

import React, { Component } from "react";从./ChildComponent"导入 ChildComponent；类 App 扩展组件 {构造函数(道具){超级(道具)；this.state = {值:"，prevValue: "",提交:假};this.handleChange = this.handleChange.bind(this);}句柄变化(事件){this.setState({ prevValue: this.state.value });this.setState({ value: event.target.value });this.setState({ 提交: true });event.preventDefault();}使成为() {var renderBool = false;如果(this.state.submitted){if (this.state.value !== "--") {渲染布尔 = 真；}}返回 (<div className="Base"><h1>按产品线 </h1><表格><label className="label">选择工作流程:{""}<select value={this.state.value} onChange={this.handleChange}><选项值=--">-- </选项><option value=Lebron_James">Lebron James</option><option value=Kobe_Bryant">Kobe Bryant</option><option value=Lamar_Jackson">Lamar Jackson</option></选择></表单><div>{renderingBool &&(<子组件历史={this.props.history}细节={this.state.value}/>)}

);}}导出默认应用程序；

ChildComponent.js

import React, { Component } from "react";类 ChildComponent 扩展组件 {构造函数(道具){超级(道具)；this.state = {数据:"};this.getData = this.getData.bind(this);}componentDidMount() {this.getData();}getData = () =>{var url = "https://en.wikipedia.org/wiki/";+ this.props.detail;控制台日志(网址)；获取(网址).then((结果) => results.text()).then((results) => this.setState({ data: results })).catch((err) => console.log(err));};使成为() {返回 <h1>{this.props.detail}</h1>;}}导出默认子组件；

如果我在调用子组件之前没有布尔值，我将无法渲染它.因此，我必须将 renderingBool 设置为 false(通过选择--")，然后通过选择另一个选项再次将其设置为 true，所有这些都是为了重新渲染子组件.有解决方法吗?

解决方案

componentDidMount 在组件mounted 时运行，即第一次出现时.一旦您通过选择另一个值更改了 prop，它就不会再次重新挂载组件，它只会更新 prop 并重新渲染它.

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

componentDidMount() {this.getData();}componentDidUpdate(prevProps) {if (this.props.detail !== prevProps.detail) {//这可以防止更新进入无限循环this.getData();}}

I have a component which has a form, and from that form you can select three options. Once either of these options is selected, a child component is rendered underneath. This child component needs to fetch data from a server based on the input.

The issue I am having is that although I am able to pass data down to the child component, the child component is unable to fetch unless I select the default option on the parent component and then select another value.

Here is my code: 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;

If I do not have a boolean before calling the child component, I will not be able to render it. So, it makes sense that I have to set renderingBool to false (by selecting "--") and then set it to true again by selecting another choice, all in an effort to re-render the childComponent. Is there a workaround this?

解决方案

The componentDidMount runs when the component is mounted i.e. when it appears for the first time. Once you change the prop by selecting another value, it doesn't re-mount the component again, it just updates the prop and re-renders it.

If you want to fetch the data again when the detail prop changes you need to use componentDidUpdate along with 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 传递的详细信息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！