代码之家 › 专栏 › 技术社区 › Torben

React Native-将数据从一个组件传递到另一个组件

react-native reactjs javascript

Torben · 技术社区 · 6 年前

我从别人那里接手了一个React本地项目,这个项目已经很老了(2年),我遇到了以下情况:

Home.js组件:(我简化了它)

export let customersData = null;

export default class Home extends Component {  

    render() {
        return (
            <JumboButton
                onPress={() => {
                  this.props.navigator.push({
                    component: CustomerSearch
                  });
                }}
              >
        );
    }

    _getAllCustomers(limit, sortAttr, order) {
        apiCall.(apiUrl, {
        ...
        }).then((responseData) => {
            const customersDataAll = responseData.data;
            customersData = customersDataAll.filter((f) => {
                return f.lastname !== ''
            });
        });
    }
}

客户搜索.js:

import {customersData} from './Home';

export default class CustomerSearch extends Component {
    constructor(props) {
        super(props);
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: this.ds.cloneWithRows(customersData),
        };
    }
}

有两件事对我来说有点奇怪:

customersData 而不是 this.customersData 在api调用的回调中?
目前我得到这个错误 https://d.pr/i/IUzxdf “无法将未定义或空值转换为对象”,我假设这是由于 客户数据

谢谢你的帮助!

1 回复 | 直到 6 年前

fredmoon 6 年前

简而言之,这绝对是一种不寻常的反应模式,不是很多人会推荐的。导入 let

更明智的做法是 customersData 到父组件的 state 把它传给 CustomersSearch 通过一个道具。

export default class Home extends Component {
  constructor (props) {
     super(props);
     this.state = { customersData: null };
     this._getAllCustomers = this._getAllCustomers.bind(this)
  }

  render() {
    return (
        <JumboButton
          onPress={() => {
            this.props.navigator.push({
              component: props =>
                <CustomerSearch customersData={this.state.customersData} {...props} />
            });
          }}
        >
    );
  }

  _getAllCustomers(limit, sortAttr, order) {
    apiCall.(apiUrl, {
    ...
    }).then((responseData) => {
        const customersDataAll = responseData.data;
        const customersData = customersDataAll.filter((f) => {
            return f.lastname !== ''
        });
        this.setState({ customersData });
    });
  }
}

不知道你的 JumboButton 的 onPress 道具确实管用,但你应该明白吗?

推荐文章

user19476497 · 如何使用useState修改数组以使其成为React中的常数

2 年前

Muhammad Ashraf · 反应:过滤从具有特定键的对象数组中获取值,并将结果分组到数组中

2 年前

John · 如何确定Javascript自引用循环是否完成[重复]

2 年前

Herc · 将用户信息添加到firebase(注册)react native

2 年前

Bonhart · 有没有更好的方法按名称查找数组中的特定对象?

2 年前

ubermo · 如何在React本机自定义组件中使用状态?

2 年前

ramanujans alkhazarim · 错误“元素类型无效”React Native

2 年前

Audrey K · 有没有办法降级React Native?

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前

Tedi · 如何将单个数据从子组件传递到父组件?

2 年前