Проблема с созданием простого приложения со списком продуктов питания при помощи избыточного кода в программе native native.

Question

Я пытаюсь создать простое приложение со списком продуктов, я хочу, чтобы пользователь записал название продукта в textinput (на экране ввода) и нажал на кнопку «Отправить», затем те названия, которые были написаны, будут напечатаны на другом экране (с именем foodlist экран), все состояния будут работать через Redux.

У меня есть две проблемы:

1: кнопка отправки не работает, это означает, что когда пользователь начинает вводить текстовый ввод, все буквы печатаются, я хочу, чтобы это происходило, когда пользователь нажимает кнопку отправки

2: если пользователь вводит слово из пяти букв, Redux печатает пять элементов в списке продуктов экран (как показано в следующем пи c)

Как я могу это исправить?

Это код редуктора:

import {
    ADDFOOD,
    REMOVEFOOD,
    CLEANTEXT




} from '../actions/types';

initialState = {

    foodList: []

}




export const foodReducer = (state = initialState, action) => {

    switch (action.type) {
        case ADDFOOD:
            return {
                ...state,
                foodList: state.foodList.concat({
                    name: action.payload,
                    index: Math.random()
                })
            }
            break;
        case REMOVEFOOD:
            return {
                ...state,
                foodList: state.foodList.filter((item) =>
                    item.index !== action.payload

                )
            }
            break;

        case CLEANTEXT:
            return {
                ...state,
                foodList: ''
            }
            break;

        default:
            return state;
    }



}

Это код ввода текста:

import { useSelector, useDispatch } from 'react-redux';
import { addFood, cleanText } from '../actions';



const Login = (props) => {

  const { navigation } = props;
  const foodList = useSelector(state => state.foodR.foodList);

  const dispatch = useDispatch();

  return (


    <View style={styles.container}>

      <Text style={{ color: 'black', fontSize: 20 }}>Login Form</Text>

      <TextInput
        style={styles.input}
        placeholder='Food name'
        onChangeText={(value) => dispatch(addFood(value))}
        value={foodList}





      />

      <TouchableOpacity
        activeOpacity={0.8}
        style={styles.button}


      >

        <Text style={{ color: 'white', textAlign: 'center' }}>Submit</Text>

      </TouchableOpacity>
      <TouchableOpacity
        activeOpacity={0.8}
        style={styles.button}
        onPress={() => {

          navigation.navigate('FoodList');

        }}

      >

        <Text style={{ color: 'white', textAlign: 'center' }}>Go to Food list</Text>

      </TouchableOpacity>








    </View>






  )

}

А это код списка продуктов:

import { useSelector, useDispatch } from 'react-redux';
import { removeFood } from '../actions';






const FoodList = () => {



    const foodList = useSelector(state => state.foodR.foodList);
    const dispatch = useDispatch();





    return (

        <View style={styles.mainContainer}>
            <View style={styles.container}>
                <FlatList
                    data={foodList}
                    keyExtractor={(item, index) => index}
                    renderItem={({ item, index }) => (

                        <TouchableOpacity
                            style={styles.button}
                            activeOpacity={0.7}
                            onPress={(index) => dispatch(removeFood(item.index))}
                        >


                            <Text style={{ fontSize: 20, marginLeft: 10 }} >{item.name}</Text>


                            <Icon type='FontAwesome5' name='trash' style={{ fontSize: 25, marginRight: 10 }} />
                        </TouchableOpacity>

                    )} />

            </View>
        </View>

    )

}

Answer 1

Вы вызываете действие каждый раз, когда изменяется текст

onChangeText={(value) => dispatch(addFood(value))}

То, что вы хотите сделать, это сохранить значение не в избыточном, а в локальном состоянии, используя хук useState ()

Затем, когда нажата submit, добавьте строку, которая принимает последнее состояние, сохраненное локально, и отправляет его в приставку:

onPress={() => {
   // get the local state and call dispatch(removeFood(item.index))
   navigation.navigate('FoodList');
}}

Answer 2

«Кнопка« Отправить »не работает, это означает, что когда пользователь начинает вводить текст, все буквы печатаются, я хочу, чтобы это происходило, когда пользователь нажимает кнопку« Отправить »"

  <TextInput
    style={styles.input}
    placeholder='Food name'
    onChangeText={(value) => dispatch(addFood(value))}
    value={foodList}
  />

Но вы вызов функции addFood для onChangeText, а не для самой кнопки, и он должен быть onSubmit. Это также причина вашей второй проблемы, поскольку вы просто добавляете каждый новый элемент в массив