Question

我试图更改字典中的值。当我使用console.log（）时，我发现该值已添加到字典中，但是，当我导出该值时，它表明字典为空。

当我在类中管理代码时，它显示已添加到字典和列表中的值。但是，当我在课外使用它时。列表和字典为空。

//this is the list and dictionary i want to export
var list = [];
var QuantityDict = {};
 
export default class OrdersList extends React.Component {
	render() {
		const {
			items,
		} = this.props;

		for(var i=0;i<items.length;i++){
			var id = items[i].items[0].id;
			var name = items[i].items[0].name;
			var quantity = items[i].items[0].quantity;

			list.push([id,name,quantity]);
		}
		
		for(var i=0;i<list.length;i++){
			var name = list[i][1];
			var quantity = list[i][2];

			if(name in QuantityDict){
				QuantityDict[name]+=quantity;
			}else{
				QuantityDict[name]=quantity;
			}
		}
        //the list length is not 0 in this step.
		console.log('list.length in function: '+list.length);
		for(var key in QuantityDict){
			console.log('key: '+key+' ---value: '+QuantityDict[key]);
		}


		return (.....
		);
	}
}


//the list length is 0 at this step.
console.log('list.length in function: '+list.length);

//the QuantityDict is empty when i try to export it
for(var key in QuantityDict){
	console.log('key: '+key+'---value: '+QuantityDict[key]);
}

console.log(QuantityDict.length);

export {QuantityDict}

Answer 1

当您将组件导入到app / index.js（或其他位置）时，其模块（作用域）的变量/函数会放在顶部。虽然只有您的React类/函数可以访问，但是它们在导入时被声明/立即运行。（他们有点像私人全球人士）将所有这些console.logs附加到React.DOM后立即运行，而React.component则运行。

考虑此代码

  const { eat, bananas} = (()=>{

    let bananas={count:5};

    function eat(){
      bananas.count-=1;
      console.log('inside eat func', bananas)
    }

    console.log('before return', bananas)

    return { eat, bananas };
    })();

  eat();
  console.log('after calling eat', bananas)

console.log结果

before return {count: 5}
inside eat func {count: 4}
after calling eat {count: 4}

可能是其他文件

  const { eat, getBananas} from '../...'

但是会完全一样。

与React相同的示例

const { OrdersList, QuantityDict} = (()=>{ 
      var QuantityDict = {count:0};

      class OrdersList extends React.Component {
        state = {id:Math.floor(Math.random() * 100)};
        render() {

          QuantityDict['count'] +=1;
          console.log('inside render '+this.state.id,QuantityDict)

          return <div>Hello {this.props.name}</div>;
        }
      }
      console.log('before return',QuantityDict)

      return { OrdersList, QuantityDict};
    })();

    const ff = new OrdersList({name:'World'});
    ff.render();

    console.log('after import',QuantityDict)

    ReactDOM.render(
      <OrdersList name="World" />,
      document.getElementById('container')
    );

    console.log('after React.DOM',QuantityDict)

日志

before return {count: 0}
inside render 55 {count: 1}//id 55 = ff manual  initialization and render call
after import {count: 1} // QuantityDict still got updated
inside render 66 {count: 2}//id 66 React.DOM
after React.DOM {count: 2}

如您所见，这里我还手动初始化了OrdersList，但这自然是一个不同的实例。尽管两个实例共享相同的作用域，所以在其上调用render会影响QuantityDict.count并将其提高到1

const ff = new OrdersList({name:'World'});
ff.render();

没有日志的是

before return {count: 0}
after import {count: 0}
inside render 21 {count: 1}
after React.DOM {count: 1}

这也是为什么要小心在React.Component外部声明变量（除非它是const）的原因。如果您的组件依赖于此，则对该变量进行更改将影响该组件的所有实例。

TL：DR：当调用组件的render函数时，词典中将填充数据。要么由您直接调用（可能对测试有用），要么在您的网页/实时服务器启动时由React.DOM调用，要么仅在您以某种方式运行主文件时（即React.DOM所在的位置）被React.DOM调用。 >

导出字典为空

1 个答案: