首頁猿問如何在 React JS...

如何在 React JS 中將參數(shù)傳遞給 componentDidMount 方法

JavaScript

森欄 2023-07-20 14:58:02

我想通過 App.js 中的按鈕獲取用戶的輸入，從站點(diǎn) API 獲取一些信息（數(shù)據(jù) id），然后使用獲取的信息（id）通過將 id 發(fā)送到來向用戶顯示所需的信息Population.js 但它無法正常工作。我認(rèn)為 componentDidUpdate 可能需要一些參數(shù)，因?yàn)槲冶仨毎l(fā)送的獲取請(qǐng)求需要用戶輸入才能工作。此外，我認(rèn)為我的代碼甚至在用戶按下按鈕之前就正在獲取信息，因?yàn)榭刂婆_(tái)沒有顯示正確的信息我需要的 id（它顯示 4-5 個(gè)值，但全部都不正確）。如果我對(duì)值進(jìn)行硬編碼，它就可以正常工作。基本上，我想通過按鈕獲取輸入，使用該輸入來獲取某些內(nèi)容，然后使用獲取的內(nèi)容來獲取其他內(nèi)容，然后顯示獲取的信息。請(qǐng)幫助我。我是 React 的初學(xué)者。這是APP.jsimport 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); }); }

查看完整描述

2 回答

慕斯709654

TA貢獻(xiàn)1840條經(jīng)驗(yàn) 獲得超5個(gè)贊

您的要求不同，您不必在這里使用 componentDidMount，因?yàn)槟鷮⒃谟脩舭聪滤阉靼粹o后進(jìn)行服務(wù)調(diào)用。

我已經(jīng)修改了您的代碼以在按下按鈕時(shí)工作，并將代碼傳遞給填充組件，該組件在 componentDidMount 和 componentDidUpdate 上調(diào)用 api，因?yàn)榇a將來可能會(huì)更新

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 (

<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>

);

}

人口組成就像

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>;

}

反對(duì) 回復(fù) 2023-07-20

有只小跳蛙

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超8個(gè)贊

一旦組件安裝，就會(huì)調(diào)用 componentDidMount 函數(shù)，因此一旦組件安裝，它就會(huì)執(zhí)行獲取操作。如果您希望在單擊按鈕時(shí)發(fā)生獲取操作，則必須將代碼放置在自定義函數(shù)中并在單擊按鈕時(shí)調(diào)用它。我認(rèn)為您無法將任何道具傳遞給已安裝的組件，因?yàn)槟鸁o法控制何時(shí)調(diào)用它。componentDidUpdate可能對(duì)您有用

反對(duì) 回復(fù) 2023-07-20