0

Изучаю react native, создаю todo приложение. У меня есть несколько компонентов, в компоненте Navbar содержится две кнопки первая кнопка Todo должна отображать добавление и список дел, то есть компонент TodoScreen, вторая кнопка должна делать тоже самое только для тегов. const [showTodos, setShowTodos] = useState(true) работает когда я сам руками меняю его, но это стейт не видит изменений когда я нажимаю на кнопку. Благодарю за помощь

App.js

import React, { useState } from 'react'
import { StyleSheet,  View, FlatList } from 'react-native'
import { Navbar } from './src/Navbar'
import { TagScreen } from './src/screens/TagScreen'
import { TodoScreen } from './src/screens/TodoScreen'

export default function App() {
  const [todos, setTodos] = useState([])
  const [tags, setTags] = useState([])
  const [showTodos, setShowTodos] = useState(true);



  const addTodo = title => {
    setTodos(prev => [
      ...prev,
      {
        id: Date.now().toString(),
        title
      }
    ])
  }

  const addTags = title => {
    setTags(prev => [
      ...prev,
      {
        id: Date.now().toString(),
        title
      }
    ])
  }


  const removeTags = id => {
    setTags(prev => prev.filter(tag => tag.id !== id))
  }
  const removeTodo = id => {
    setTodos(prev => prev.filter(todo => todo.id !== id))
  }



  const makeTodosInvisible= () => setShowTodos(false);
  const makeTodosVisible = () => setShowTodos(true);

  return (
    <View>
      <Navbar onTodoPress={makeTodosVisible } onTagPress={makeTodosInvisible} title='Todo App!' />
      <View style={styles.container}>
        {showTodos 
        ? <TodoScreen todos={todos} addTodo={addTodo} removeTodo={removeTodo} />
        :  <TagScreen addTags={addTags} tags={tags} removeTags={removeTags}/>
        }

        {/* <TodoScreen todos={todos} addTodo={addTodo} removeTodo={removeTodo} /> */}
        {/* HERE MUST CHANGED COMPONENTS */}
        </View>
    </View>
  )

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 30,
    paddingVertical: 20
  }
})

Navbar.js

import React from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'

export const Navbar = ({ title, onTodoPress, onTagPress}) => {
  return (
    <View style={styles.padding}>
      <View style={styles.navbar}>
        <TouchableOpacity 
        style={styles.button}
         onPreesed={onTodoPress} // will hide Tags and show Todos
        >
          <Text>Todo</Text>  

        </TouchableOpacity>
        <TouchableOpacity 
        style={styles.button}
          onPreesed={onTagPress} // will show Tags and hide Todos
        >
          <Text>Tags</Text>  
        </TouchableOpacity>
        <Text style={styles.text}>{title}</Text>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  padding: {
    paddingTop: 30
  },
  navbar: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    justifyContent: 'space-evenly'
  },
  text: {

  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10
  }
})

2
  • Лучше загружайте примеры на codesanbox. Попробуйте обернуть ваши функции в usecallback и укажите setStat'ы в качестве тригеров для обновления. ru.reactjs.org/docs/hooks-reference.html#usecallback
    – ZiiMakc
    Commented 28 февр. 2020 в 10:58
  • Спасибо за ваш ответ. Я нашёл свою ошибку, банально не правильно именованна функция Commented 2 мар. 2020 в 14:24

1 ответ 1

0

Нужно onPreesed поменять на нормальную функицию onPrese. Не замечал этой грамматической ошибки несколько дней( всё оказалось гораздо проще

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.