Javascript 如何在React JS中将参数传递给componentDidMount方法

我想通过App.js中的按钮获取用户的输入，从站点API获取一些信息（数据id），然后通过将id发送到Population.js，使用获取的信息（id）向用户显示所需的信息，但它无法正常工作。我认为componentDidUpdate可能需要一些参数，因为我必须发送的获取请求需要用户输入才能工作。此外，我认为我的代码甚至在用户按下按钮之前就在获取信息，因为控制台没有显示我所需的正确id（它显示4-5个值，并且所有值都不正确）。但如果我硬编码这些值，效果很好。基本上，我希望通过按钮获取输入，使用该输入获取某些内容，然后使用获取的内容获取其他内容，然后显示获取的信息。请帮助我。我是React的初学者。 这是APP.js

import React from 'react';
import './App.css';
import Population from './Population.js';

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = { name: "" ,info : {},formSubmit: false};
        this.handleInput = this.handleInput.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }   
    
      handleInput (event) {
        console.log(event.target.value);
      }
    
      handleFormSubmit (event) {
        event.preventDefault();
        console.log("the value " + event.target.value);
        this.setState({formSubmit: true,name : event.target.value});
      }
      
        componentDidMount(){//the value property needs to be fetched from user 
        fetch(`https://wft-geo-db.p.rapidapi.com/v1/geo/cities?namePrefix=${value}`, {
            "method": "GET",
            "headers": {
                "x-rapidapi-key": "c4ab967692mshc65dd5c6e10a987p1790bejsn81ea7b831444",
                "x-rapidapi-host": "wft-geo-db.p.rapidapi.com"
            }
        })
        .then(response => response.json())
        .then(data => {
            const newInfo = data.data;
            const newName = newInfo[0].wikiDataId;
            const newState = Object.assign({},this.state,{
                info : newInfo,
                name : newName
            });
            this.setState(newState);
            console.log("The sent code " + this.state.name);
        })
        .catch(err => {
            console.error(err);
        });
      }

      render () {

        return (
          <div className="App">
            <h1>
                Enter the name of the city: <br/>
            </h1>
            <form >
              <label>
                Enter the city name to get the population:{" "}
                <input
                  type="text"
                />
                <button onClick = {this.handleFormSubmit}>Enter</button>  
                  
              </label>
              
            </form>
            {this.state.formSubmit && <Population name={this.state.name} />}
          </div>
        );

      }
}

export default App;

从“React”导入React；
导入“/App.css”；
从“/Population.js”导入人口；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={name:，info:{}，formSubmit:false}；
this.handleInput=this.handleInput.bind（this）；
this.handleFormSubmit=this.handleFormSubmit.bind（this）；
}   
handleInput（事件）{
日志（event.target.value）；
}
handleFormSubmit（事件）{
event.preventDefault（）；
log（“值”+event.target.value）；
this.setState（{formSubmit:true，name:event.target.value}）；
}
componentDidMount（）{//value属性需要从用户获取
取回(`https://wft-geo-db.p.rapidapi.com/v1/geo/cities?namePrefix=${value}`{
“方法”：“获取”，
“标题”：{
“x-rapidapi-key”：“c4ab967692mshc65dd5c6e10a987p1790bejsn81ea7b831444”，
“x-rapidapi-host”：“wft geo db.p.rapidapi.com”
}
})
.then（response=>response.json（））
。然后（数据=>{
const newInfo=data.data；
const newName=newInfo[0]。wikiDataId；
const newState=Object.assign（{}，this.state{
信息：新信息，
姓名：newName
});
this.setState（newState）；
log（“发送的代码”+this.state.name）；
})
.catch（错误=>{
控制台错误（err）；
});
}
渲染（）{
返回(
输入城市名称：

输入城市名称以获取人口：{“”}
进入
{this.state.formSubmit&&}
);
}
}
导出默认应用程序；

这里是Population.js

import React from 'react';
import "./App.css";
class Population extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            info : {},
            population : 0,
        }
        this.getPopulation = this.getPopulation.bind(this);
    }

    getPopulation(name){
        fetch(`https://wft-geo-db.p.rapidapi.com/v1/geo/cities/${name}`, {
        "method": "GET",
        "headers": {
           "x-rapidapi-key": "c4ab967692mshc65dd5c6e10a987p1790bejsn81ea7b831444",
           "x-rapidapi-host": "wft-geo-db.p.rapidapi.com"
            }   
        })
       .then(response => response.json())
       .then((data) => {
           const newInfo = data.data;
           const newPopulation = newInfo.population;
           const newState = Object.assign({},this.state,{
               info : newInfo,
               population : newPopulation
           });
           this.setState(newState);
           console.log(this.state.info);
       })
       .catch(error => {
            console.error(error);
        });
    
    }

    componentDidMount(){
        this.getPopulation(this.props.name);
        console.log("The name " + this.props.name);

    }

   render(){
    return (
        <div className="App">
            The population is {this.state.population}
        </div>
        );
    }

}
export default Population;

从“React”导入React；
导入“/App.css”；
类填充扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
信息：{}，
人口：0，
}
this.getPopulation=this.getPopulation.bind（this）；
}
getPopulation（名称）{
取回(`https://wft-geo-db.p.rapidapi.com/v1/geo/cities/${name}`{
“方法”：“获取”，
“标题”：{
“x-rapidapi-key”：“c4ab967692mshc65dd5c6e10a987p1790bejsn81ea7b831444”，
“x-rapidapi-host”：“wft geo db.p.rapidapi.com”
}   
})
.then（response=>response.json（））
。然后（（数据）=>{
const newInfo=data.data；
const newPopulation=newInfo.population；
const newState=Object.assign（{}，this.state{
信息：新信息，
人口：新人口
});
this.setState（newState）；
console.log（this.state.info）；
})
.catch（错误=>{
控制台错误（error）；
});
}
componentDidMount（）{
this.getPopulation（this.props.name）；
log（“名称”+this.props.name）；
}
render（）{
返回(
人口是{this.state.population}
);
}
}
导出默认人口；

组件装载后会立即调用componentDidMount函数，因此它会在组件装载后立即执行提取操作。如果希望在单击按钮时执行提取操作，则必须将代码放置在自定义函数中，并在单击按钮时调用它。我不认为你们可以将任何道具传递给组件，因为你们不能控制它何时被调用。componentDidUpdate可能对您有用

---

您的要求不同，您不必在此处使用componentDidMount，因为您将在用户按下搜索按钮后进行服务呼叫

我已经修改了你的代码来处理button press，它将一个代码传递给population组件，该组件在componentDidMount和componentDidUpdate上调用api，因为代码将来可能会更新

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "", info: {}, formSubmit: false, code: "" };
    this.handleInput = this.handleInput.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }

  handleInput(event) {
    console.log(event.target.value);
     this.setState({ name: event.target.value, formSubmit: false });
  }

  handleFormSubmit(event) {
    event.preventDefault();

    fetch(
      `https://wft-geo-db.p.rapidapi.com/v1/geo/cities?namePrefix=${this.state.name}`,
      {
        method: "GET",
        headers: {
          "x-rapidapi-key":
            "",
          "x-rapidapi-host": "wft-geo-db.p.rapidapi.com"
        }
      }
    )
      .then((response) => response.json())
      .then((data) => {
        const newInfo = data.data;
        const newName = newInfo[0].wikiDataId;
        const newState = Object.assign({}, this.state, {
          info: newInfo[0],
          code: newName,
          formSubmit: true
        });
        this.setState(newState);
        console.log("The sent code " + this.state.name);
      })
      .catch((err) => {
        console.error(err);
      });
  }

  componentDidUpdate() {
    //the value property needs to be fetched from user
  }

  render() {
    return (
      <div className="App">
        <h1>
          Enter the name of the city: <br />
        </h1>
        <form>
          <label>
            Enter the city name to get the population:{" "}
            <input
              type="text"
              value={this.state.name}
              onChange={this.handleInput}
            />
            <button onClick={this.handleFormSubmit}>Enter</button>
          </label>
        </form>
        {this.state.formSubmit && <Population name={this.state.code} />}
      </div>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={name:，info:{}，formSubmit:false，代码：}；
this.handleInput=this.handleInput.bind（this）；
this.handleFormSubmit=this.handleFormSubmit.bind（this）；
}
handleInput（事件）{
日志（event.target.value）；
this.setState（{name:event.target.value，formSubmit:false}）；
}
handleFormSubmit（事件）{
event.preventDefault（）；
取回(
`https://wft-geo-db.p.rapidapi.com/v1/geo/cities?namePrefix=${this.state.name}`，
{
方法：“获取”，
标题：{
“x-rapidapi-key”：
"",
“x-rapidapi-host”：“wft geo db.p.rapidapi.com”
}
}
)
.then（（response）=>response.json（））
。然后（（数据）=>{
const newInfo=data.data；
常数newName
class Population extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      info: {},
      population: 0
    };
    this.getPopulation = this.getPopulation.bind(this);
  }

  getPopulation(name) {
    fetch(`https://wft-geo-db.p.rapidapi.com/v1/geo/cities/${name}`, {
      method: "GET",
      headers: {
        "x-rapidapi-key": "",
        "x-rapidapi-host": "wft-geo-db.p.rapidapi.com"
      }
    })
      .then((response) => response.json())
      .then((data) => {
        const newInfo = data.data;
        const newPopulation = newInfo.population;
        const newState = Object.assign({}, this.state, {
          info: newInfo,
          population: newPopulation
        });
        this.setState(newState);
        console.log(this.state.info);
      })
      .catch((error) => {
        console.error(error);
      });
  }

  componentDidMount() {
    if (this.props.name) {
      this.getPopulation(this.props.name);
      console.log("The name " + this.props.name);
    }
  }

  componentDidUpdate() {
    if (this.props.name) {
      this.getPopulation(this.props.name);
      console.log("The name " + this.props.name);
    }
  }

  render() {
    return <div className="App">The population is {this.state.population}</div>;
  }
}