Question

我有以下json文件。现在，我将其保留在本地的ReactJS项目中。稍后计划移动到服务器位置。

abtestconfig.json

[
    { 
        "abtestname": "expAButton",
        "traffic": 1,
        "slices": 
        [
            "orange",
            "blue"
        ]
    },
    { 
        "abtestname": "expTextArea",
        "traffic": 0.5,
        "slices": 
        [
            "lightgrey",
            "yellow"
        ]
    }
]

我想读取和获取数据并将其解析并应用于函数中。我得到了一些参考示例代码，并尝试使用fetch api通过以下代码来响应json文件。

读取此json文件后，我将不得不在abtest函数中传递数据，如您所见，它现在以硬编码值abtest('expAButton', 0.75).slices('orange', 'blue').run(function ()

发送

我有以下疑问，希望得到您的指导/说明。

1。使用fetch API读取json文件是否正确？还有其他最佳方法吗？

2。当我使用如下所述的fetch API时，控制台日志显示GET http://localhost:8080/abtesting/abtestconfig.json 404 (Not Found)

app.jsx文件：

import './abtesting/abtestconfig.json';    

class App extends React.Component {

    constructor() {
        super();

        this.onClick = this.handleClick.bind(this);
        this.onClickNewUser = this.handleNewUser.bind(this);

        this.state = {
            bgColor: '',
            data: []         
        }         
     };
     handleNewUser (event) {
        abtest.clear();
        window.location.reload();
     }

    render() {
        return (
                <Helmet
                />                 
                <p><b>A/B Testing Experience</b></p>

                    <div className="DottedBox">
                        <p><button id = "newUserButton" onClick = {this.onClickNewUser} style={{backgroundColor:"red"}}>Welcome and click here</button></p>

                    </div>
        );

    }

handleClick () {

        abtest('expAButton', 0.75).slices('orange', 'blue').run(function () {
            expAButton.style.backgroundColor = this.slice.name;
        });
}

setStyle (stylecolor) {
        this.setState({
            bgColor: stylecolor
          })
    }

componentDidMount () {

this.handleClick();

        fetch('./abtesting/abtestconfig.json').then(response => {
            console.log(response);
            return response.json();
          }).then(data => {
            // Work with JSON data here
            console.log(data);
          }).catch(err => {
            // Do something for an error here
            console.log("Error Reading data " + err);
          });
    }
}    
export default hot(module)(App);

调用本地json文件并在ReactJS中解析数据

0 个答案: