首頁猿問在 React 中將...

在 React 中將 setStateof 嵌套對象傳遞給子對象

JavaScript

慕娘9325324 2023-03-18 16:37:38

我有一個問題，我一直在谷歌搜索，但找不到答案。如果我有一個組件（父），它有一個使用鉤子的狀態useState和另一個我想將 setState 函數傳遞給的組件（子），但狀態是一個嵌套對象，我該怎么做。例如：家長：import React, { useState } from 'react';import ChildComponent from '../components/ChildComponentexport default function Parent() {const [state, setState] = useState({name: '', age: '', height: '', eyeColor: ''})return ( <h1>Title</h1> <ChildComponent state={state} setState={???}/>);}孩子：import React, { useState } from 'react';export default function ChildComponent({state, setState}) {return ( <label htmlFor='nameInput'>Name:</label> <input name='nameInput' value={state.name} onChange={(e) => setState???}/>);}我通常知道狀態是否在一個組件中setState({...state, state.name: 'Jane'})，但我不確定我將如何傳遞這種信息setState。編輯：我希望ChildComponent setState函數是動態的，這樣我可以為每個狀態值（名稱、年齡、身高、eyeColor）重用該組件 4 次，同一個組件可能會傳入一個值來更改更新的值？

查看完整描述

4 回答

慕田峪4524236

TA貢獻1875條經驗獲得超5個贊

一種方式（在許多可能的方式中）：

export default function Parent() {

const [state, setState] = useState({name: '', age: '', height: '', eyeColor: ''})

const change = prop => ({target}) => setState(state => ({...state,[prop]:target.value}));

return (

<h1>Title</h1>

);

}

export default function ChildComponent({label,value,onChange}) {

return (

<label htmlFor={`${label}Input`}>{label}:</label>

);

}

反對回復 2023-03-18

千巷貓影

TA貢獻1829條經驗獲得超7個贊

您可以使用的函數形式setState來訪問當前狀態。

setState作為第一個參數傳遞當前狀態：

onChange={(e) => setState(currentState => ({...currentState, name: newName}))}

反對回復 2023-03-18

慕森卡

TA貢獻1806條經驗獲得超8個贊

您可以setState像通過state. 家長：

import React, { useState } from 'react';

import ChildComponent from '../components/ChildComponent

export default function Parent() {

const [state, setState] = useState({name: '', age: '', height: '', eyeColor: ''})

return (

<h1>Title</h1>

);

}

孩子：

import React, { useState } from 'react';

export default function ChildComponent({state, setState}) {

return (

<input name='nameInput' value={state.name} onChange={(e) => setState(e.target.value)}/>

);

}

反對回復 2023-03-18

函數式編程

TA貢獻1807條經驗獲得超9個贊

您可能會受益于利用React.createContext并React.useContext在組件之間傳遞狀態。

從文檔：

在典型的 React 應用程序中，數據通過 props 自上而下（父到子）傳遞，但這對于應用程序中許多組件所需的某些類型的 props（例如語言環境首選項、UI 主題）來說可能很麻煩。Context 提供了一種在組件之間共享這些值的方法，而無需顯式地通過樹的每個級別傳遞 prop。

下面是一個示例，說明如何使用上下文在 n 層深的組件之間共享狀態。

const {

? useState,

? useEffect,?

? createContext,

? useContext

} = React;

const ComponentContext = createContext();

function Parent() {?

? const [state, setState] = useState({name: 0, age: 0});

? return (?

? ? <ComponentContext.Provider value={state}>

? ? ? ? <div>Parent</div>

? ? ? ? <Child/>

? ? ? ? <button?

? ? ? ? ? ? onClick={()=>setState({...state, name: state.name+1})}>

? ? ? ? ? ? ? ? Update Name

? ? ? ? </button>

? ? ? ? <button?

? ? ? ? ? ? onClick={()=>setState({...state, age: state.age+1})}>

? ? ? ? ? ? ? ? Update Age

? ? ? ? </button>

? ? </ComponentContext.Provider>

? );

}

function Child() {?

? const {name} = useContext(ComponentContext);

? return <div>

? ? ? <div>1st Child: {name}</div>

? ? ? <Child2/>

? </div>;

}

function Child2() {?

? const {age} = useContext(ComponentContext);

? return <div>2nd Child: {age}</div>;

}

const rootElement = document.getElementById("root");

ReactDOM.render( <Parent /> , rootElement);

反對回復 2023-03-18

4 回答
0 關注
180 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 React 中將 setStateof 嵌套對象傳遞給子對象

在 React 中將 setStateof 嵌套對象傳遞給子對象

4 回答

添加回答