Question

我有本地json文件，我想在React中动态更新这些文件的路径。例如，我有

file1.json

file2.json

我在每个json文件中都有对象。

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  state = {
      user: require('./'),
      userSelected: null,
    };
  handleChange =(e) => {
    var data = './json/' + e.target.value + '.json';
    try{
      this.setState({
        user: require(data), userSelected: e.target.value
        });
    }catch(err){
      console.log(err.message)
    }
  }

  render() {
    return (
      <div>
      <input value={this.state.userSelected} onChange={this.handleChange}/>
        <h1> {this.state.user.name} </h1>
        you are {this.state.user.age} years old
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

这不起作用。我得到 未声明为index.js的System.registerDynamic依赖项 错误

我已经尝试过在函数内部嵌套-不起作用， import-返回一个空的承诺， konfig-不起作用

我需要访问json数据，并根据状态的变化动态显示其名称和年龄。

需求是使用require函数。我不能使用fetch或axios。

Answer 1

您可以利用axios从json文件中获取数据。

axios.get('../public/users.json') // JSON File Path
   .then( response => {
     this.setState({
     data: response.data
   });
 })
 .catch(function (error) {
   console.log(error);
 });

Answer 2

U只是开玩笑地从本地文件中获取json数据，然后为此使用访存api

handleChange =(e) => {
    var data = './json/' + e.target.value + '.json';
    fetch(data)
  .then((response) => {
    return response.json();
  })
  .then((response) => {
    this.setState({
        user: response, userSelected: e.target.value
        });
  });
  }

Answer 3

https://codesandbox.io/s/7om3w3r4p0为我工作。可以使用require模块动态导入文件

Answer 4

您可以只使用async await导入文件。

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = {
    user: {},
    userSelected: null
  };
  handleChange = async ({ target }) => {
    const value = target.value;
    var json = `./${value}.json`;
    try {
      const data = await import(json);
      this.setState({
        user: data,
        userSelected: value
      });
    } catch (err) {
      console.log(err.message);
    }
  };

  render() {
    return (
      <div>
        <input value={this.state.userSelected} onChange={this.handleChange} />
        <h1> {this.state.user.name} </h1>
        you are {this.state.user.age} years old
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 5

已编辑 要解决System.registerDynamic依赖性问题，您必须配置webpack加载json文件

webpack.config.js

module.exports = {
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  }
}

然后可以通过

加载文件


import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  state = {
      user: require('./'),
      userSelected: null,
    };
  handleChange =(e) => {
const value = e.target.value;
  var data = require('json!./${value}.json'); // forward slashes will depend on the file location

    try{
      this.setState({
        user: data, userSelected: e.target.value
        });
    }catch(err){
      console.log(err.message)
    }
  }

  render() {
    return (
      <div>
      <input value={this.state.userSelected} onChange={this.handleChange}/>
        <h1> {this.state.user.name} </h1>
        you are {this.state.user.age} years old
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

动态更新需求路径

5 个答案: