Question

我有两个React组件，它们的父组件是相同的。

第一个组件有一个按钮，第二个组件只是在其中显示一些文本。

单击第一个组件中的按钮时，会发生以下情况：

第二部分中的文本设置为“正在加载”
第一个组件中触发了一个请求。
之后，第二个组件显示来自请求的响应。

现在这是问题所在。我想在请求得到响应后检查文本。这是我尝试过的：

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Left from '../Boxes/Left.js';

configure({adapter: new Adapter()});

function upd(data) {
    expect(data).toBe("some json response");
}

it('When button is clicked I get a response', async () => {
    const wrapper = shallow(<Left cb={upd}/>);
    const button = wrapper.find('#button_id');
    await button.simulate('click');
});

这些是组件文件。

父级-> App.js

import React, {Component} from 'react';
import './style.css';
import Left from './Boxes/Left.js';
import Right from './Boxes/Right.js';

class App extends Component {
    constructor() {
        super();

        this.state = {
            data: ""
        };

        this.upd = this.upd.bind(this);


    }

    upd(data) {
        this.setState({"data": data});
    }


    render() {
        return <div>
            <div className="topClass">
                <Left cb={this.upd}/>
            </div>
            <div className="bottomClass">
                <Right data={this.state.data}/>
            </div>
        </div>;
    }
}

export default App;

第一个组件-> Left.js

import React, {Component} from 'react';

class Left extends Component {

    constructor() {
        super();

        this.bid = "button_id";

        this.get_content = () => {
            this.props.cb("Loading");

            fetch("https://hplussport.com/api/products/order/price/sort/asc/qty/1")
                .then(data => data.json())
                .then(data => {
                    this.props.cb(JSON.stringify(data[0]));
                    console.log(data);
                });


        }
    }

    render() {
        return <div>
            <button id={this.bid} onClick={this.get_content}>Fetch</button>
        </div>
    }
}

export default Left;

第二个组件-> Right.js

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

class Right extends Component{

    constructor() {
        super();
    }

    componentDidUpdate() {
        console.log(this.props);
    }

    render() {
        return <div>
            {this.props.data}
        </div>
    }

}

export default Right;

我面临的问题是，当第二次调用回调函数时，开玩笑并没有检查数据。仅在第一次调用该函数时检查数据。

预先感谢：）

在React中用笑话两次检查变量

0 个答案: