當我將滑鼠懸停在父類組件的按鈕上時，我想更改子函陣列件的文本。我在子組件中訪問 prop 時遇到問題，并且獲取空值。任何幫助表示贊賞
父組件：
export default class PathfindingVisualizer extends React.Component {
constructor(props) {
super(props)
this.state = {
AlgoDef: null,
};
}
render() {
return (
<React.Fragment>
<div className="button-bar"> //buttons that change state
<button
onClick={() => this.helperDikjstras()}
onm ouseOver={() => this.setState({ AlgoDef: "Dikj"})}
>Dikjstras</button>
<button
onClick={() => this.helperAstar()}
onm ouseOver={() => this.setState({ AlgoDef: "Astar"})}
>A*</button>
</div>
<div>
<AlgoExplaination algoName={this.AlgoDef} /> //changes its text based on state of parent
</div>
</React.Fragment>
);
}
}
我的子組件：
export default function AlgoExplaination(props) {
const [text, setText] = useState("default");
useEffect(() => {
switch (props) {
case "Dikj":
setText("Dikjstra");
break;
case "Astar":
setText("Astar");
break;
default:
setText("useEff");
}
//console.log(`text: ${text}`);
//console.log(props);
// console.log(props.algoName);
});
return (
<div>
<p>{text}</p>
</div>
)
}
兩個控制臺日志props都給了我：{algoName: null}. 并props.algoName給我null
uj5u.com熱心網友回復：
正如@Rajesh在評論中提到的，您將 props錯誤地傳遞給您的AlgoExplaination（原文如此）組件，如下所示：
<AlgoExplaination algoName={this.AlgoDef} />
您打算傳遞AlgoDef狀態的屬性，即this.state.AlgoDef，因此相應地更改為：
<AlgoExplaination algoName={this.state.AlgoDef} />
此外，當您訪問algoNameprops的屬性時，您當前嘗試訪問它，就好像它是 props 物件本身一樣不正確，如下所示：
switch (props) {
propsfor的物件AlgoExplaination將是一個具有algoName看起來（部分）如下所示的屬性的物件：
{ algoName: "Dikj" }
因此，您需要的值實際上存盤在props.algoName. 因此，請相應地更改為：
switch (props.algoName) {
uj5u.com熱心網友回復：
我建議你解構道具，更清楚。
在
export default function AlgoExplaination(props)
可以是這樣的：
export default function AlgoExplaination({algoName})
所以你可以在你的 switch 陳述句中使用它。
switch (algoName) {
case "Dikj":
setText("Dikjstra");
現在，您正在傳遞所有道具，但您必須在 switch 陳述句中以 props.algoName 的身份訪問。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/360721.html
標籤：javascript 反应