单击 EventForm 页面中的 Add 按钮时，我无法保存详细信息，必须在 EventList 页面中显示在 react native 中

Question

无法显示在 Eventform 中输入的文本并显示在 EventList 页面的平面列表中。我是 react native 的新手，需要一些帮助来解决问题。学习开发笔记应用程序。

EventForm js 我在其中输入了具有名称位置和注释字段的文本，但是当按下添加按钮时，它不会在平面列表中显示。

class EventForm extends Component {

    state = {
        title: null,
        date: '',
    };
    handleAddPress = () => {
     saveevents(this.state)
    //    console.log('saving events:', this.state);
          .then(()=> this.props.navigation.goBack());
    }
    // handlePress() {
    //     this.props.onBtnPress()
    //   }
    // }

    handleChangeTitle = (text) => {
        this.setState({ title: text });
    }
    handleChangeLocation =(text) => {
        this.setState({location: text});
    }

    render() {

        return (
            <View
                style={{
                    flex: 1
                }}
            >
                <View style={styles.fieldContainer}>
                    <TextInput
                        style={styles.text}
                        placeholder="Name"
                        spellCheck={false}
                        value={this.state.title}
                        onChangeText={this.handleChangeTitle}

                    />
                    <TextInput
                        style={styles.text}
                        placeholder="Enter your Location"
                        spellCheck={false}
                        value={this.state.location}
                        onChangeText={this.handleChangeLocation}

                    />
                    <AutoExpandingTextInput
                        placeholder="Write your Notes here"
                        spellCheck={false}
                        style={[styles.default, {height: Math.max(35, this.state.height)}]}
                        value={this.state.text}
                    />
                </View>
                <TouchableHighlight
                onPress ={() =>this.handleAddPress.bind(this)}
                    // onPress={this.handleAddPress}
                    style={styles.button}

                >
                    <Text style={styles.buttonText}>Add</Text>
                </TouchableHighlight>

            </View>

我想显示在 EventForm 中输入的动态文本的 EventList js 应该出现在 flatlist 中。我将平面列表内容保存在 db json 文件中并在 EventList 中调用它。

     const styles = StyleSheet.create({
          list: {
            flex: 1,
            paddingTop: 20,
            backgroundColor: '#A9A9A9'

          },

        });

        class EventList extends Component {
          state = {
            events: [],
          }
          componentDidMount() {

             //getEvents().then(events => this.setState({ events }));

            const events = require('./db.json').events;
            this.setState({ events });

          }

          render() {
            return [

              <FlatList
                key="flatlist"
                style={styles.list}
                data={this.state.events}
                renderItem={({ item, seperators }) => (<EventCard events= 
 {item} />)}
                keyExtractor={(item, index) => index.toString()}

              />,

我的 db json 文件是我手动输入的详细信息。动态输入的数据必须保存在 db json 文件中，并且应该反映在 flatlist 中。

        {
            "events":[
                {
                    "name":"chandu",
                    "date":"15-06-2018 ",
                    "location":"Sydney",
                    "content":"How are you..?",
                    "id":"05dafc66-bd91-43a0-a752-4dc40f039144"
                },
                {
                    "name":"bread",
                    "date":"15-07-2018 ",
                    "location":"Sydney",
                    "content":"I bought bread..?",
                    "id":"05dafc66-bd91-43a0-a752-4dc40f039145"
                }
        ]
        }

我希望在表单中输入的任何文本都应该保存并显示在 EventList 文件中的 Flatlist 上。如果您有任何解决方案，请提供帮助。

我在 onPressed 时添加了警报消息以显示它是否被按下。

我希望在表单中输入的任何文本都应该保存并显示在 EventList 文件中的 Flatlist 上。如果您有任何解决方案，请提供帮助。 我在 onPressed 时添加了警报消息以显示它是否被按下。

Answer 1

您的 EventForm 和 EventList 是两个独立的组件，没有任何共享道具。

假设您正在从EventsForm 组件更新db.json 文件（使用文件读/写方法），仍然在EventsList 中，数据仅在componentDidMount 上获取一次。

您需要将EventList 的数据作为道具传递或保持状态。如果你把它保存在 props 中，那么你必须使用一些生命周期方法来更新 state 的值，例如 getDerivedStateFromProps props 或类似的东西。

编辑： 我建议使用像redux 这样的全局状态管理库来保存在EventForm 组件中输入的数据，而不是在文件中读/写。

您可以通过在 EventForm 组件中调度 action 来保存数据。 稍后使用

访问 EventList 组件中的数据

this.props.your_db_name

即使在应用程序终止时使用redux-persist，您也可以保存这些数据

如果你还想继续读/写文件，可以看看这个库react-native-fs