时间戳

首页 > 解决方案 > 如何更改我在 ReactJS 中动态状态的余额

reactjs - 如何更改我在 ReactJS 中动态状态的余额

问题描述

我是 useContext 的新手。我有一个提供者将我的源数据发送到我的名为 CheckBook 的函数。在 CheckBook 内部，我有可以显示我的 sourceData 的列和行。我想要的是根据贷方和借方属性更改余额属性。

const sourceData = [
  {
    tid: 1,
    date: '2020-03-10T10:47:02-05:00',
    credit: 100,
    description: 'initial deposit',
  },
  {
    tid: 2,
    check_no: 1,
    date: '2020-03-10T16:50:59Z',
    debit: 3.14,
    description: 'gum',
    canceled: true,
  },
  {
    tid: 3,
    check_no: 2,
    date: '2020-03-10T16:49:21-05:00',
    debit: 3.14,
    description: 'gum',
  }

];

这是我的提供者

const CheckContext = React.createContext({
  entries: [],
  getEntries: async () => {},
  setCancel: async (tid, value) => {},
});


export function CheckProvider(props) {
  const [entries, setEntries] = React.useState(() =>
    sourceData.map((item, rid) => ({
      ...item,
      rid,
      date: new Date(Date.parse(item.date)),
      canceled: !!item.canceled,
    }))
  );

  const contextValue = React.useMemo(() => {
   


    const setCancel = async (tid, value) => {
      setEntries((currentEntries) =>
        currentEntries.map((item) => ({
          ...item,
          canceled: item.tid === tid ? value : item.canceled,
        }))
      );
    };

    return {
    
      entries: entries.map((item,index,array) => ({ ...item, balance:
          index===0?item.credit:(
            
              item.credit===undefined?(array[index-1].balance-item.debit):(array[index-1].balance+item.credit)
            
          )
        
        
         })),
      setCancel,
    };
  }, [entries]);

我有一个名为 CheckBook 的函数。它在行和列中显示了我的 sourceData 属性。我创建了一个输入元素来将取消的属性更改为 true 或 false。但我不知道如何使用上下文来更改它。

// component to render the check book
export function CheckBook(props) {
  const value=React.useContext(CheckContext)
  console.log(value)
  const [sortedField, setSortedField] = React.useState({
    sortBy: '',
  });

  const toggleSort = (key) => {
    let sortBy = 'asc';
    setSortedField({ key, sortBy });
  };

 function renderRows(state) {
  
    return (
      <>
        {entries.map((entry, index, array) => (
          <tr key={entry.tid}>
            <th scope="row">{entry.date.toUTCString()}</th>
            <th scope="row">{entry.tid}</th>
            <th scope="row">{entry.debit}</th>
            <th scope="row">{entry.credit}</th>
            <th scope="row">{entry.balance}</th>
            <th scope="row">{entry.description}</th>
            <th scope="row">
              <input
                onChange={(e) => setCancel(entry.tid, e.target.checked)}
                type="checkbox"
              ></input>
            </th>
          </tr>
        ))}
      </>
    );
  }

  return (
    <CheckContext.Consumer>
      {(state) => (
        <div className={'tableWrapper'}>
          <table>
            <thead>
              <HeaderRow sortedField={sortedField} toggleSort={toggleSort} />
            </thead>
            <tbody>{renderRows(state)}</tbody>
          </table>
        </div>
      )}
    </CheckContext.Consumer>
  );
}

在此处输入图像描述 这是我最后应该看到的结果屏幕

标签： reactjs

解决方案

如果您按创建条目的顺序对条目进行排序，您可以创建一个新条目数组，其中每个条目包含余额，直到该条目使用reduce

下面是一个简单的示例代码，可以帮助

const entries = [
  { credit: 100, order: 1 },
  { debit: 50, order: 2 },
  { credit: 12, order: 3 },
  { debit: 5, order: 4 },
  { credit: 62, order: 5 }
];

const getValueToAdd = (entry) => 'credit' in entry ? entry.credit : -1 * entry.debit;

const { result } = entries.reduce((acc, entry) => {
  acc.balance = acc.balance + getValueToAdd(entry);
  acc.result.push({ ...entry, balance: acc.balance });
  return acc;
}, { balance: 0, result: [] });

console.log(result)

结果将是

[
  { credit: 100, order: 1, balance: 100 },
  { debit: 50, order: 2, balance: 50 },
  { credit: 12, order: 3, balance: 62 },
  { debit: 5, order: 4, balance: 57 },
  { credit: 62, order: 5, balance: 119 },
]

推荐阅读