Question

使用Components选择特定值后，如何强制重新加载某些或全部反应Picker？

    import React from 'react';
    import { Picker, Text, View } from 'react-native';

    export default class Test extends React.Component {
      render(){
        return (
          <View>
            <TestComponent />
            <Text>
              {defaultKey + ' from defaultKey from main class'}
            </Text>
          </View>
        );
      }
    }

    let myArr = [
      {
        "key": "key0",
        "value": "value0"
      },
      {
        "key": "key1",
        "value": "value1"
      }
    ];

    let defaultKey = "key0";

    class TestComponent extends React.Component {
      constructor (props){
        super(props);
        this.state = {
          selectedValue : "value0",
          PickerValueHolder : "value0"
        }
      }
      render(){
        return (
          <View>
            <Picker
              selectedValue ={ this.state.PickerValueHolder }
              onValueChange ={ (itemValue, itemIndex) => {
                  this.setState({ PickerValueHolder: itemValue });
                  defaultKey = myArr[itemIndex].key;
                  defaultIndex = itemIndex;
                }
              } 
            >
              { myArr.map((item, key)=>(
                <Picker.Item label={ item.key } value={ item.value } key={ key } />)
              )}
            </Picker>
            <Text>
              {defaultKey + ' from defaultKey from TestComponent'}
            </Text>
          </View>
        );
      }
    }

在这种情况下，默认类中的<Text>不会重新加载。如何重新加载？以及如何强制重新加载导入的组件？

Answer 1

只要renders / refresh发生变化，反应组件state / props。如果要重新渲染当前组件，请更改为state。如果要呈现子组件更改，则为props。如果要重新渲染父组件，请使用回调并修改回调中的state。

Answer 2

您可以使用redux之类的全局状态管理，但是如果您不熟悉它，则可以通过props将处理程序作为回调发送给Parent。

更改当前组件值使用

/**
 * 
 * @param start 1st result
 * @param size result set max size
 * @param filters WHERE search conditions. Key - entity field (column name), Value - search string or date range
 */
 public List<Entity> fetchEntities(int start, int size,
                                      Map<String, Object> filters) {
        CriteriaBuilder cb = em.getCriteriaBuilder();
        CriteriaQuery<Entity> criteriaQuery = cb.createQuery(Entity.class);
        Root<Entity> root = criteriaQuery.from(Entity.class);
        applyFilters(filters, cb, criteriaQuery, root);
        CriteriaQuery<Entity> select = criteriaQuery.select(root);
        TypedQuery<Entity> query = em.createQuery(select);
        query.setFirstResult(start);
        query.setMaxResults(size);
        return query.getResultList();
    }

 private void applyFilters(Map<String, Object> filters, CriteriaBuilder cb, CriteriaQuery<?> criteriaQuery, Root<?> root) {
        if (filters != null && !filters.isEmpty()) {
            List<Predicate> predicates = new ArrayList<>();
            for (Map.Entry<String, Object> entry : filters.entrySet()) {
                String fieldName = entry.getKey();
                Object value = entry.getValue();
                if (value == null) {
                    continue;
                }
                Predicate p;
                if (Entity.isDateField(fieldName)) {
                    DateRange dateRange = (DateRange) value;
                    p = cb.between(root.get(fieldName), dateRange.getStart(), dateRange.getEnd());
                } else {
                    Expression<String> expr = root.get(fieldName).as(String.class);
                    p = cb.like(cb.lower(expr),
                            "%" + value.toString().toLowerCase() + "%");
                }
                predicates.add(p);
            }
            if (!predicates.isEmpty()) {
                criteriaQuery.where(cb.and(predicates.toArray(new Predicate[0])));
            }
        }
    }

更改子组件的值使用并传递道具

向孩子插入道具：

img{
     width:50%;
}
@media only screen and (max-width: 600px) {
    img {
        width:100%;
    }
}

从子组件中获取值：

this.state

更新Parent状态与上述类似，但要求prop是从Parent传递来的函数。

<ChildComponent prop1={value}/>

这将意味着如下所示：

this.props.prop1

更新：

OP询问了为什么要使用redux（因为某些组件没有通过Test类嵌套）。

什么是Redux？

Redux是JavaScript应用程序的可预测状态容器。它可以帮助您编写性能一致的应用程序。

在此处签出文档：https://redux.js.org/

本质上，在构建需要在React / React Native中的组件之间共享状态的应用程序时，您已经遇到了很多人面临的问题。在每个组件中，您都有一个本地状态（handler () {// some function in parent component} <ChildComponent prop1={this.handler}/>）-Redux包含一个全局应用程序状态，因此在您更改默认值的类中，您可以更新全局存储（所有组件都可以访问）。您显示的import React from 'react'; import { Picker, Text, View } from 'react-native'; export default class Test extends React.Component { constructor(props) { super(props) this.handler = this.handler.bind(this); this.state = { defaultKey : "somevalue" }; } handler(value) { this.setState({ defaultKey: value }) } render(){ return ( <View> <TestComponent handler={this.handler}/> <Text> {this.state.defaultKey + ' from defaultKey from main class'} </Text> </View> ); } } let myArr = [ { "key": "key0", "value": "value0" }, { "key": "key1", "value": "value1" } ]; let defaultKey = "key0"; class TestComponent extends React.Component { constructor (props){ super(props); this.state = { selectedValue : "value0", PickerValueHolder : "value0" } } render(){ return ( <View> <Picker selectedValue ={ this.state.PickerValueHolder } onValueChange ={ (itemValue, itemIndex) => { this.setState({ PickerValueHolder: itemValue }); defaultKey = myArr[itemIndex].key; defaultIndex = itemIndex; this.props.handler(defaultKey); } } > { myArr.map((item, key)=>( <Picker.Item label={ item.key } value={ item.value } key={ key } />) )} </Picker> <Text> {defaultKey + ' from defaultKey from TestComponent'} </Text> </View> ); } }值将来自全局存储。

从本质上讲，彼此不相关的组件不会相互了解this.state，您将需要使用全局存储（例如redux）。我建议您对最适合自己的技术进行一些研究。目前可以实现的一种方法是将整个应用程序包装在父组件中，然后从此处传递道具，例如

defaultValue

要进一步阅读，请在此处查看一些帖子：

How to update parent's state in React?

How to share state among multiple scenes of a Navigator in React-Native

如何根据选择器的选定值重新加载每个React组件？

2 个答案: