时间戳

首页 > 解决方案 > 如何计算当前值加上进入数组的下一项？

javascript - 如何计算当前值加上进入数组的下一项？

问题描述

我还是 JavaScript 和 ReactJS 的初学者。

我有一个列表，其中显示了用户键入的一些数字。我想知道的是如何将数组中存在的当前值添加到+用户键入的新值中。

例如，如果我的数组中有一个数字 5，并且用户键入数字 3，我想添加这些值并将它们显示给用户。通过一张图更容易解释：

这是我的代码。

在此处输入图像描述

添加新价值

import React from "react";

import { AppContext } from "../../providers";

const Add = () => {
  const { dispatch } = React.useContext(AppContext);
  const [transaction, setTransaction] = React.useState(0);

  const onChangeValue = (e) => {
    setTransaction(+e.target.value);
  };

  const onTransactions = () => {
    if (transaction === 0) return;
    dispatch({
      type: "ADD_TRANSACTION",
      payload: transaction
    });
    setTransaction(0);
  };

  return (
    <div>
      <h3>New transaction</h3>
      <div>
        <div>
          <input type="number" value={transaction} onChange={onChangeValue} />
        </div>
      </div>
      <div style={{ margin: "20px 0" }}>
        <button type="button" onClick={onTransactions}>
          Submit
        </button>
      </div>
    </div>
  );
};

export default Add;

列出结果：

import React from "react";

import { AppContext } from "../../providers";

const List = () => {
  const { state } = React.useContext(AppContext);

  return (
    <div>
      {state.transactions.map((transaction) => (
        <div>
          <span>
            -You add ${transaction}, your balance is: ${transaction}
          </span>
        </div>
      ))}
    </div>
  );
};

export default List;

非常感谢您的帮助！！！

标签： javascriptreactjs

解决方案

如果您保持总余额和流动余额：

const initialState = {
  balance:0,
  transactions: []
};

const reducer = (state, action) => {
  switch (action.type) {
    case "ADD_TRANSACTION":
      return {
        ...state,
        balance: state.balance + action.payload,
        transactions: [{value:action.payload,balance:state.balance+action.payload}, ...state.transactions]
      };
    default:
      return state;
  }
};

您可以在列表视图中呈现这些

const List = () => {
  const { state } = React.useContext(AppContext);

  return (
    <div>
      {state.transactions.map((transaction) => (
        <div>
          <span>
            -You add ${transaction.value}, your balance is: ${transaction.balance}
          </span>
        </div>
      ))}
    </div>
  );
};

推荐阅读