reactjs - 如何停止状态变量被reactjs中的先前值覆盖？

问题描述

我将从服务器获取的数据存储在状态变量中。如果我打开具有大数据显示正确信息的项目，它工作正常。但是，在没有可用数据的情况下打开项目后，它会显示以前的项目值。

考虑情景，

item 1 没有数据， item2 有大数据。open item1 不显示任何数据。现在打开的 item2 显示它的数据（很大）现在打开的 item1 显示 item2 的数据，而不是不显示任何数据。

不知道我哪里出错了。

下面是代码，

class ItemDetails extends React.PureComponent {
    constructor(props) {
    super(props);
    this.state = {
        item_info: null,
        item_info_loading: false,
    };

    componentDidMount() {
        this.unmount = new Promise((resolve) => { this.on_unmount = 
        resolve;});
        this.load_item_info();
        this.unlisten_path_change = this.props.history.listen((location) => 
            {this.handle_path_change(location.pathname);});
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevProps.item_id !== this.props.item_id) {
            this.setState({item_info: null}, this.load_item_info);}
    }

    componentWillReceiveProps(nextProps, nextState) {
       if(nextProps.item_id !== this.props.item_id) {
            this.setState({item_info: null}, this.load_item_info);
       }}

    componentWillUnmount() {
        this.on_unmount();
        this.unlisten_path_change();
    }

    load_item_info = () => {
    const file_name = 'item_info.json';
    this.setState({item_info_loading: true});
    client.get_item_file(this.props.model_id, file_name, 'json', 
    this.unmount).finally(() => this.setState({item_info_loading: false}))
        .then((request) => {
            this.setState({item_info: request.response})
        })};

    render () {
       <ItemInfoTool
           item_info={state.item_info}
           item_info_loading={this.state.item_info_loading}/>}}

    export default class ItemInfoTool extends React.Component {
        state = {
            open_item_data: null,};

        componentDidMount() { 
            this.set_open_item_data();
        }
       componentDidUpdate(prevProps) {
           if (prevProps.selected_id !== this.props.selected_id) {
               this.set_open_item_data();
           }
       }

set_open_item_data = () => {
    if (!this.props.item_info) {
        return;
    }
    if (this.props.selected_id === this.empty_id) {
        this.setState({open_item_data: null});
        return;
    }

    let open_item_data = {
        info: [],
        values: [],
    };
    const item_info = this.props.item_info;
    for (let i=0, ii=item_info.length; i < ii; i++) {
        if (item_info[i].somekey.includes(this.props.selected_id)) {
            const info = item_info[i].info;
            const values = object_info[i].values;
            open_item_data = {
                info: typeof info === 'string' ? info.split('\r\n') : [],
                values: values ? values : [],
            };
            break;
        }
    }
    this.setState({open_item_data:open_item_data);
};}


export function get_item_file(item_id, file_name, response_type, 
on_progress, cancel) {
     const local_override_defined = item_files[item_id] && 
         item_files[item_id][file_name];
         if (local_override_defined) {
             const file = item_files[item_id][file_name];
             const reader = new FileReader();

             return new Promise(resolve => {
                if (response_type === 'blob') {
                    resolve({response: file});
                } else {
                    reader.onload = () => {
                        if (response_type === 'json') {
                            resolve({response: JSON.parse(reader.result)});
                        } else {
                            resolve({response: reader.result});
                        }};
                reader.readAsText(file);}});}

    return new Promise((resolve, reject) => {
        item_file_get_url(item_id, file_name).then(({response}) => {
            const request = new XMLHttpRequest();
                 request.addEventListener('progress', on_progress);
                 request.open('GET', response.url);
                 request.responseType = response_type;
                 send_request(request, undefined, cancel, 
                 response.url).then(resolve).catch(reject);})});}

有人可以帮我解决它。谢谢。我怀疑是否发生了一些异步请求。

标签： reactjs

reactjs - 如何停止状态变量被reactjs中的先前值覆盖？

问题描述

解决方案

推荐阅读