我想在 componentDidMount() fetch call URL 中使用從父到子的 {prop.idno} 。如何在 URL 中使用 idno 來呼叫不同的帖子頁面。
有沒有辦法這樣寫？
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts?userId= ${this.prop.idno}`
);
父組件：
return (
<>
<TogglePosts idno = {user.id}/>
</>
)
子組件：
export class TogglePosts extends Component {
constructor(props){
super(props);
this.state = {
on: false,
data: [],
loaded: false,
};
}
toggle = () => {
this.setState({
on: !this.state.on,
});
};
async componentDidMount() {
console.log("comp did mount");
try {
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts?userId=1`
);
const data = await response.json();
console.log(data);
this.setState({ data: data, loaded: true });
} catch (err) {
console.log(err);
}
}
uj5u.com熱心網友回復：
您可以嘗試編輯與此類似的回復。
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts?userId= ${this.props.idno}`
);
請注意，我使用了 `(tilde) 而不是 "(雙引號) 也使用props而不是prop
uj5u.com熱心網友回復：
試試這個：
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts?userId= ${this.props.idno}`
);
模板文字（``）是在字串中包含運算式和變數的能力。
uj5u.com熱心網友回復：
您可以嘗試使用 TogglePosts 組件中的 props.idno 訪問它嗎？在 fetch 陳述句中，您可以執行類似 fetch(`https://jsonplaceholder.typicode.com/posts?userId=${props.idno}`);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/464787.html
標籤：javascript 反应 休息 组件