Question

React Native非常新，我正在使用小型照片/文本上传应用程序，上传后，我在自动刷新显示帖子的组件方面遇到问题。

问题在于，上载器位于模式堆栈内的另一个组件中，我无法直接更改状态，也不能将组件从父对象传递给子对象作为道具（因为上载者的组件不是子对象）。

据我了解，我通常会有两个选择：

将函数从父母传递给孩子作为道具，以更改显示组件的状态以触发其刷新。我已经尝试过了，由于没有亲子关系，所以不起作用。
在整个应用中实施redux，再次更改（全局）状态并触发显示组件刷新。我已经开始这样做了，但是对于一些相对简单的事情来说，它似乎完全是最重要的。

还有其他选择吗？如果没有，关于使用redux触发组件刷新是否有很好的指导？

代码：

显示数据库项目的组件。目前，只有手动更新才能完整显示。

//This is the display component.
class VaultScreen extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            items: [],
            itemsFormatted: [],
            photo_id: null,
            itemSelected: '',
            searchQuery: '',
            numberOfUploads: 0
         };
      this.refreshFlatListItem = this.refreshFlatListItem.bind(this)
  }

  //This function is called in the upload component so we change the state and reload the display. It is currently not being called/not working.
  refreshFlatListItem = () => {
      console.log('test')
      this.setState((prevState) => {
          return {
              numberOfUploads: prevState.numberOfUploads +1
          };
      });
  }

负责上载的模式组件。

//This class is the component in the modal, used for uploading text.
class AddTextModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            textCaption: null,
        };
    this.upload = this.upload.bind(this);
    }

    //the upload function is declares so we can access the refreshFlatListItem function in the display
    upload() {
        this.props.refreshFlatListItem;
    }

    //onSubmit is called when the user hits the 'submit' button. It takes the textInput and logs it to the console.
    //If it isn't null it adds it to the SQLite DB, calls the upload function (that changes the state of the display to trigger reload)
    //then resets the textInput state and navigates to the vault
    onSubmit = ()  => {
        const { textCaption } = this.state;
        console.log(textCaption)

        if (textCaption != null) {
                this.add(textCaption);
                this.upload
                this.setState({ textCaption: null });
                this.props.navigation.navigate('Vault')
            } else {
        return null
        }
    }

    //add is called in the upload and adds our textInput into the DB. It does not load into display automatically.
    add(text) {
      db.transaction(
        tx => {
          tx.executeSql('INSERT INTO items (value, caption, type) values (?, ?, ?)', [null, text, 'thought']);
        },
        null,
      );
    }

App.js

function App() {
              return (
                      <NavigationContainer>
                        <Stack.Navigator
                          initialRouteName="Home"
                          mode='modal'
                          screenOptions={{
                              cardStyle: { backgroundColor: 'transparent' },
                              cardOverlayEnabled: true
                          }}
                        >
                          <Stack.Screen
                            name="Vault"
                            component={Main}
                            options={{ headerShown: false }}
                          />
                          <Stack.Screen
                            name="Modal"
                            component={Modal}
                            options={{ headerShown: false }}
                          />
                        </Stack.Navigator>
                    </NavigationContainer>
              );
            }

Answer 1

在这种情况下，您可以使用观察者模式。

我过去浏览过此博客与您分享。我认为它将解决您的问题。

https://medium.com/javascript-in-plain-english/react-hooks-and-the-observer-pattern-1e4274f0e5f5

您可以添加此didMount并在组件的UnMount中将其删除。

Answer 2

将您的应用替换为类组件

import {Component} from 'react-native'

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            numberOfUploads: 0
        }
    }

    //Callback funtion
    handleNewUpload() {
        this.setState((prevState) => {
            return {
                numberOfUploads: prevState.numberOfUploads +1
            };
        });
    }

    //Notice that you pass the number of uploads as props
    render(){
    return (
        <NavigationContainer>
            <Stack.Navigator
              initialRouteName="Home"
              mode='modal'
              screenOptions={{
                  cardStyle: { backgroundColor: 'transparent' },
                  cardOverlayEnabled: true
              }}
            >
                <Stack.Screen name="Vault"
                    optons={{headerShown: false }}>
                  {props => <Main {...props} numberOfUploads={this.state.numberOfUploads} />}
                </Stack.Screen>

             <Stack.Screen
                name="Modal"
                options={{ headerShown: false }}
             >
             {props => <Modal {...props} handleNewUpload={this.handleNewUpload} />}
             </Stack.Screen>
            </Stack.Navigator>
        </NavigationContainer>
    );
    }
}

在数据库上载时重新渲染组件

2 个答案: