在不改变整个状态的情况下改变state数组(REACT / REDUX)

Change state's array without changing the whole state (REACT / REDUX)

本文关键字：改变 数组 REACT REDUX state 情况下 状态      更新时间：2023-09-26

我得到了一个要购买的东西列表(对于我用React制作的小游戏)，这是一个数组。它在一个叫做"市场"的州。我有另一个，我想随机化所有的值，并将它们存储在另一个状态。

这是我的市场列表:

let marketList = [
  {"name": 'product name', "qty": 0, "minPrice": 10, "maxPrice": 100, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false},
  {"name": 'product name', "qty": 0, "minPrice": 30, "maxPrice": 200, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false},
  {"name": 'product name', "qty": 0, "minPrice": 100, "maxPrice": 1500, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false},
  {"name": 'product name', "qty": 0, "minPrice": 200, "maxPrice": 4000, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false},
  {"name": 'product name', "qty": 0, "minPrice": 50, "maxPrice": 6000, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false},
  {"name": 'product name', "qty": 0, "minPrice": 1, "maxPrice": 400, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false},
  {"name": 'product name', "qty": 0, "minPrice": 60, "maxPrice": 3450, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false},
  {"name": 'product name', "qty": 0, "minPrice": 2, "maxPrice": 120, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false},
  {"name": 'product name', "qty": 0, "minPrice": 8, "maxPrice": 600, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false},
  {"name": 'product name', "qty": 0, "minPrice": 120, "maxPrice": 3200, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false},
  {"name": 'product name', "qty": 0, "minPrice": 35, "maxPrice": 100, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false},
  {"name": 'product name', "qty": 0, "minPrice": 300, "maxPrice": 12000, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false},
  {"name": 'product name', "qty": 0, "minPrice": 1, "maxPrice": 80, "currentPrice": 0, "historyPrice": [], "historyQty": [], "available": false}
];

我想随机化其中的所有值，并将随机化的列表存储在一个名为"明天"的状态中，以便能够给出关于下一个价格的提示。这是我随机化列表的帮手。

export function randomiseMarketList(list, day = 0){
  for(let i = 0; i < list.length; i++) {
    let item = list[i];
    let historyQtylength = item.historyQty.length;
    let random = randomAlgo(day);
    item.currentPrice = Math.floor(Math.random() * (item.maxPrice - item.minPrice)) + item.minPrice;
    item.qty = random;
    item.available = !(day == 0 || item.qty < 1);
    item.historyPrice.push(item.currentPrice);
    item.historyQty.push(item.qty);
  } 
  return list;
}
function randomAlgo(day) {
  let quart = Math.floor(Math.random() * 4);
  let multiple = Math.floor(Math.random() * 10);
  let maxQuart = Math.floor(Math.random() * (quart * multiple * day));
  let minQuart = Math.floor(Math.random() * (quart * multiple));
  return Math.floor(Math.random() * (maxQuart - minQuart)) + minQuart;
}

这是我的Tomorrow减速器:

import { ACTIONS } from '../utils/consts';
import { randomiseMarketList } from '../utils/helpers';
var initialState = {
  currentPlaceList: []
};
export function tomorrow(state = initialState, action = '') {
  switch (action.type) {
    case ACTIONS.BUILD_TOMORROW_LIST:
      console.log(action);
      let listToRandom = action.list.slice();
      let randomactionList = randomiseMarketList([...listToRandom], action.day);
      console.log(randomactionList);
      let newList = Object.assign({}, state, { currentPlaceList: randomactionList });
      return newList;
    default:
      return state;
  }
}

你可以在我的ACTIONS中看到。BUILD_TOMORROW_LIST，我控制台记录动作，首先检查值，然后我记录随机列表，谁总是有相同的值。我不明白为什么如果我改变它们，它们有相同的值。

我认为这是因为数组是绝对相同的，我直接改变了状态(不明白为什么)。我将列表作为一个由值和扩展操作符构建的新数组传递，也不起作用。我试图创建这个数组的副本，也不工作。

当我们点击"停留在这里"动作时，明天的列表将用于替换当前的市场列表。

handleStayHere(e) {
    const { dispatch, status, tomorrow, market } = this.props;
    dispatch( MarketActions.changeWholeList(tomorrow.currentPlaceList) );
    dispatch( StatusActions.changeDay( status.day + 1 ) );
    dispatch( TomorrowActions.buildTomorrowList([...market], status.day + 1) );
  }

MarketActions。changeWholeList操作可以很好地工作，但是我不能正确地存储明天的列表。

谢谢你的帮助!

看起来你没有改变列表的元素，而是在随机化器中改变它们。这可能会导致奇怪的行为(昨天调试了这个问题=))))我认为最好将列表值映射到randomiseMarketList中的新对象，所以你不需要担心项目对象是相同的和数组切片-它将只是另一个对象引用。

randomiseMarketList(list, day = 0){
  return list.map(item => {
    //it case there's another meaningful properties in item
    ...item,
    qty: randomAlgo(day),
    currentPrice: Math.floor(Math.random() * (item.maxPrice - item.minPrice)) + item.minPrice,
    available: !(day == 0 || item.qty < 1),
    historyPrice: [...item.historyPrice, item.currentPrice],
    historyQty: [...item.historyQty, item.qty],
})

然后是reducer

function tomorrow(state = initialState, action) {
  switch (action.type) {
    case ACTIONS.BUILD_TOMORROW_LIST:
      const currentPlaceList = randomiseMarketList(action.list, action.day);
      return {...state, currentPlaceList}
    default:
      return state;
  }
}

另一个，在reducer中你切片数组，然后解构它到另一个数组-这看起来像双重工作，没有结果。

相关文章：