在不改变整个状态的情况下改变状态的数组（REACT / REDUX）

Question

我有一份要买的东西清单（用于我用 React 制作的小游戏），它是一个数组。它处于称为 "Market" 的状态。我有另一个，我想随机化所有值并将它们存储在另一个状态。

这是我的市场列表：

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}
];

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

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 reducer：

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 中看到的那样，我首先通过控制台记录操作以检查值，在我记录随机列表之后，它们始终具有相同的值。我不明白为什么我更改它们后它们具有相同的值。

我还以为是因为数组完全一样，直接改状态了（不明白为什么）。我将列表作为由值和扩展运算符构建的新数组传递，但也不起作用。我尝试创建此数组的副本，但也不起作用。

当我们点击 "stay here" 操作时，明天的列表将用于替换当前市场的列表。

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 操作效果很好，但我无法正确存储明天列表。

感谢您的帮助！

Answer 1

看起来您没有更改列表的元素，而是在随机发生器中改变了它们。这可能会导致奇怪的行为（昨天调试的问题=）））我认为最好将列表值映射到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 中，你正在对数组进行切片，然后将其解构为另一个数组——这看起来像是双重工作，没有结果。

在不改变整个状态的情况下改变状态的数组（REACT / REDUX）

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

javascript

reactjs

redux