首頁猿問 React -...

React - 如何循環和更新對象模型中的值？

JavaScript

波斯汪 2023-08-05 10:15:16

我有一個對象模型模式如下 this.state = { data: { audi: { engine: '2.5', gearbox: 'auto', fuel: 'petrol' }, bmw: { engine: '3.0', gearbox: 'auto', fuel: 'petrol' }, merc: { engine: '6.3', gearbox: 'manual', fuel: 'petrol' } } }我的目標是：循環數據并渲染將 HTML 中的值更改映射到 this.state.data 對象中的相應鍵我沒有使用數組，因為在發布它時它必須看起來像上面的對象模式。目前我正在嘗試這樣做：//To renderObject.entries(this.state.data).map((x,index) => <p>x.key</p> //Trying to reach 'audi' with x.key // Render each KPV in object {x.key}: <input key={index} onChange={this.handleChange} value={x.value}/>)然后更新同一狀態模型中的相應值：// To update the state model with changed valuessetData = (key, val) => { this.setState(state => ({ data: { ...state.data, obj: { [key]: val }, //Don't know how to map to state properly! } }));};// Handle input changehandleChange = key => e => { this.setData(key, e.target.value);};請任何人就這種方法向我提出建議，非常感謝:)

查看完整描述

3 回答

哆啦的時光機

TA貢獻1779條經驗獲得超6個贊

首先，您需要正確渲染，這意味著循環所有鍵（汽車制造商），然后循環所有屬性/值對。您可以使用解構數組來簡化此操作

Object.entries(someObject).map( ([key,value]) => .... )

繼承人渲染：

render() {

return Object.entries(this.state.data).map(([maker, props]) => {

return (

<div>

<h2>{maker}</h2>

{Object.entries(props).map(([key, value], index) => {

return (

<div>

{key}:{" "}

<input

key={index}

onChange={this.handleChange(maker, key)}

defaultValue={value}

</div>

);

})}

</div>

);

});

}

您會注意到我更改了您的handleChange方法來傳遞汽車制造商和正在編輯的屬性 - 這可以傳遞到setData：

// To update the state model with changed values

setData = (maker, key, val) => {

this.setState((state) => ({

data: {

...state.data,

[maker]: {

...state.data[maker],

[key]: val

}

//Don't know how to map to state properly! Now you do!

}

}));

};

// Handle input change

handleChange = (maker, key) => (e) => {

this.setData(maker, key, e.target.value);

};

實時工作示例：https ://codesandbox.io/s/react-playground-forked-dw9sg

反對回復 2023-08-05

繁星coding

TA貢獻1797條經驗獲得超4個贊

您首先沒有從輸入回調傳遞鍵和事件對象，您的代碼應該是這樣的，

顯示邏輯在我看來是錯誤的，

Object.entries(this.state.data).map((x, index) =>

here x is an array and it looks like

["audi", {engine: '2.5', gearbox: 'auto', fuel: 'petrol}

// You need to access the data in the second index

// if you want to print each value of the object

<p>x[1].engine</p>

<p>x[1].gearbox</p>

// Render each KPV in object

{x[0]}: <input key={index} onChange={(e) => this.handleChange(x[0], e)} value={x[1].engine}/>

)

回調handleChange應該看起來像，不要柯里化它們。

handleChange = (key, e) => {

this.setData(key, e.target.value);

};

我建議使用 lodash 的castArray之類的實用程序，https://lodash.com/docs/4.17.15#castArray將對象轉換為數組，以便您可以輕松使用它。

反對回復 2023-08-05

楊__羊羊

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

class App extends React.Component {

constructor(props) {

super(props)

this.state = {

data: {

audi: { model: "A7", transmission: "AT" },

merc: { model: "GLA", transmission: "MT" },

bmw: { model: "M3", transmission: "AT" },

}

update(make, detail, value) {

let data = this.state.data

data[make][detail] = value

console.log(`Updating ${make} ${detail} with ${value}`)

this.setState({ data: data })

}

handleChange(make, detail) {

return e => { this.update(make, detail, e.target.value) }

}

renderDetails(details) {

return details.map(d => (<div><span>{d.key}:</span> <input value={d.model} onChange={this.handleChange(d.key, "model")} /> <input value={d.transmission} onChange={this.handleChange(d.key, "transmission")} /></div>))

}

render() {

const details = Object.entries(this.state.data).map(d => ({ key: d[0], ...d[1] }))

return <div>{this.renderDetails(details)}</div>

}

ReactDOM.render((<App />), document.getElementById("app"))

body { font-family: monospace; }

span { display: block; font-weight: bold; }

input { width: 50px; }

反對回復 2023-08-05

3 回答
0 關注
212 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

React - 如何循環和更新對象模型中的值？

React - 如何循環和更新對象模型中的值？

3 回答

添加回答

React - 如何循環和更新對象模型中的值？

React - 如何循環和更新對象模型中的值？