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

Question

reactJS material ui 的文档提出了这个示例代码，用于确定进度条。

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

然后在安装时启动进度：

  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

这是有关codeandbox的工作示例。