Question

React和JavaScript的新功能-我正在构建一个React UI来存储对象的数值。我环顾四周，而助焊剂似乎是我要尝试做的一个很好的框架...

基本上，页面将具有映射到值的对象数组，用户可以在其中更改前端的单个或多个值并保存值。但是，我还没有要获取或获取的API，因此我现在仅使用静态json对象。这就是我所拥有的：

//team_ratings.json
[
  {
    "name": "Arsenal",
    "rating": 1.25
  },
  {
    "name": "Aston Villa",
    "rating": 2.5
  },
  {
    "name": "Bournemouth",
    "rating": 2.2 
  }
]

我有appDispatcher.js如下：

import {Dispatcher} from 'flux';
const dispatcher = new Dispatcher();
export default dispatcher;

在我的动作文件夹中，我有两个文件：

//actionTypes.js

export default {
  UPDATE_RATINGS: 'UPDATE_RATINGS',
};

//ratingsActions.js

import dispatcher from '../appDispatcher';
import * as ratingsApi from '../api/ratingsApi';
import actionTypes from './actionTypes';

export function saveRatings(...ratings) {

return null;
}

所以现在我被困住了。 ratings是我想通过saveRatings(ratings)函数更新的数组。最终，我将拥有一个API以输入新的评分。我不确定现在如何按助焊剂框架存储更改...是否可以暂时将其保存在localStorage中，如果可以，它如何处理数组更改？

这是我要更改的组件：

import React from 'react';
import {Table} from 'react-bootstrap';
import NumericInput from 'react-numeric-input';
import Teams from '../assets/Teams.js';

const TeamIcon = styled.span`
    margin-right: 0.5em;
  `;

const teams = Teams;

function Display() {
  return (
      <div>
        <RatingsGrid />
      </div>
  );
}


function RatingsGrid() {
  return (
    <Table striped bordered hover size="sm">
      <thead>
        <tr>
          <th>Teams</th>
          <th>Ratings</th>
        </tr>
      </thead>
      <tbody>
        {teams.map(team => (
          <tr key={team.id}>
            <td>
              <TeamIcon>
                <span>
                  <img src={team.icon} className="icon" height="42" width="42" alt={team.name}/>
                </span>
              </TeamIcon>
              {team.name}
            </td>
            <td><NumericInput step={0.01} mobile={false} size="14" /></td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}

export default Display;

React Flux-本地存储的持久状态

0 个答案: