使用数据时的材质UI线性进度动画

Question

材料ui for reactJS的文档提出了确定进度条的示例代码。

export default class LinearProgressExampleDeterminate extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            completed: 0,
        };
    }

    componentDidMount() {
        this.timer = setTimeout(() => this.progress(5), 1000);
    }

    componentWillUnmount() {
        clearTimeout(this.timer);
    }

    progress(completed) {
        if (completed > 100) {
            this.setState({completed: 100});
        } else {
            this.setState({completed});
            const diff = Math.random() * 10;
            this.timer = setTimeout(() => this.progress(completed + diff), 1000);
        }
     }

     render() {
        return (
            <LinearProgress mode="determinate" value={this.state.completed} />
        );
     }
}

这会创建一个加载动画，直到条形图满。我试图修改它以使用来自json文件的数据，以便它停止在我在每个json项中为它指定的值。我正确认识那一部分。这很容易。但动画失败是因为动画是在构造函数的状态下使用completed的值编写的。它也位于我的data.map之外，所以我似乎找到了让它读取json文件中的值的方法，因此它可以为它的超时功能设置它。 :(

这就是我所拥有的（减少）

JSON

exports.playerItems = [
    {
        id: 283,
        completed: "100",
    }
    {
        id: 284,
        completed: "70",
    }
    {
        id: 285,
        completed: "20",
    }

    ...

    {
        id: 295,
        completed: "50",
    }
]

数据注入

import PLAYERS from 'data/players.js';
const playersData = PLAYERS['playerItems'];

我的表被映射了

<Table>
   {playersData.map((row, index) => (
       <TableRow id={row.name} key={index}>
           <TableRowColumn>

                <LinearProgress
                    mode="determinate"
                    value={row.completed} />

            </TableRowColumn>
       </TableRow>
   ))}
</Table>

如何修改progress（）函数，使其动画为LinearProgress提供的值？

提前致谢

Answer 1

您可以将状态更改应用于播放器数据数组，并以增量方式不断更新数组，直到所有播放器都已渲染。

首先，从零开始：

  constructor(props) {
    super(props);
    this.state = {
      playersData: data.map(item => ({ ...item, completed: 0}))
    };
  };

然后在mount上启动进度：

  componentDidMount() {
    this.timer = setTimeout(() => this.progress(5), 100);
  }

更新，直到每个玩家达到100％：

  progress(completion) {
    let done = 0;
    this.setState({
      playersData: data.map((item, i) => {
        const { completed: current } = this.state.playersData[i];
        const { completed: max } = item;
        if (current + completion >= max) {
          done += 1;
        }
        return {
          ...item,
          completed: Math.min(current + completion, max),
        };
      }),
    });
    if (done < data.length) {
      this.timer = setTimeout(() => this.progress(5), 100);
    }
  }

根据需要调整延迟和增量。限制是你需要所有将要渲染的玩家数据，并且它需要处于状态，作为在单个setState中更新的数组

这是一个关于codesandbox的工作示例。