Question

问题：我有一个React项目组合项目，该项目有一个JSON文件，其中包含每个项目的所有图像数据路径，典型的项目数据如下所示：

{
    "id": 2,
    "titleVideo": "https://vimeo.com/...",
    "titleGif": "/images/gif/wall.gif",
    "title": "...",
    "description": "...",
    "table": [...
    ],
    "images": [
        {"id": 1, "src": "/images/projects/project1/.....jpg"},
        {"id": 2, "src": "/images/projects/project1/.....jpg"},
        {"id": 3, "src": "/images/projects/project1/.....jpg"},
        {"id": 4, "src": "/images/projects/project1/.....jpg"},
        {"id": 5, "src": "/images/projects/project1/....jpg"}
    ],

    "video": [
        {"id": 1, "src": "https://www.youtube.com/watch?..."}
    ]
},

所以理想的效果是我切换到不同的项目页面，并根据URL参数加载不同的项目数据。我已经完成了这一步。要加载JSON数据，我使用了以下代码：

在App.js中

let routes = (
  <Switch onChange={this.routerChange}>
    <Route path="/" exact component={HomePage}/>
    <Route path="/project/:name" exact component={ProjectPage}/>
  </Switch>
);

导航组件

<NavLink className = {classes.link} to={"/project/" + title } >{content.name}</NavLink>

在项目页面中使用数据：

import data from '../../store/data.json';

class ProjectPage extends Component {
state = {
    curProj: this.props.match.params.name
}

searchProjectByName = (name, data) => {
    let proj;
    data.forEach(
        project => {
            let short = project.title.toLowerCase().replace(/\s+/, "");
            if (short === name) {
                proj = project;
            }
        }
    )
    return proj;
}
componentWillReceiveProps(nextProps){
    if(nextProps.match.params.name !== this.props.match.params.name) {
        this.setState({
            curProj: nextProps.match.params.name,
        })
    }
}

render() {
    let curProj = this.searchProjectByName(this.transformName(this.state.curProj), data);

    DIRECTLY USE proj.images[0]... AS img src DATA
}

...

以上解决方案在功能上有效，但是，当在项目页面之间切换时互联网速度很低（在移动设备上）时，图像和视频需要等待很长时间才能更新为新的图像和视频。，即使URL已更新，图像仍是显示先前项目图像的图像。

我正在考虑使用某种函数来模仿异步请求并返回Promise，然后在加载页面时添加一些占位符。是否可以使用本地JSON文件模仿异步请求？还是有解决此问题的更好方法？

因此，如果有人感兴趣，那么实时网站为http://rnd.studio/。该问题在移动设备上非常明显（当您在不同项目之间切换时）

如何在React中正确加载JSON文件？

0 个答案: