Question

我有数据对象

let d = {
    'items': [
     {'item':'apple', price: 200},
     {'item':'banana', price: 300},
    ],
    tot:[2],
    'shop': 'xyx shop',
    'customer':['a','b','c']
    }

我从 api 调用中获取它并将其设置为状态。像这样

const [state, setState] = useState({})

useEffect(
{
setState(d)
},[])

这里如何更新价格？

我已经试过了

setState({...state, items[index].price - 1});

它根本不起作用。

Answer 1

复制 items 中的 state 数组
更改数据
覆盖 items 数组

let index = 1;
let newItems = [ ...state.items ];
newItems[index].price++;
      
setState({ ...state, items: newItems });

示例：

const {useState} = React;

const SameSet = () => {

    const [state, setState] = useState({
        'items': [
            {'item':'apple', price: 200},
            {'item':'banana', price: 300},
        ],
        tot: [ 2 ],
        'shop': 'xyx shop',
        'customer': ['a','b','c']
    });
    
    const update = () => {
     
      // Index to update
      let index = 1;
      
      // Copy
      let newItems = [ ...state.items ];
      
      // Bump
      newItems[index].price++;
      
      // Override
      setState({ ...state, items: newItems });
    }

    return (
        <div>
            <button onClick={update}>Click me to update!</button>
            {state.items.map(i => <em>{i.item}{' -- '}{i.price}</em>)}
        </div>
    )
}
ReactDOM.render(<SameSet />, document.getElementById("react"));

div { display: flex; flex-direction: column; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

React 更新动态嵌套状态

1 个答案: