javascript - 我如何让它在 React Native ( Logic ) 中工作

问题描述

抱歉含糊不清，我是 react-native 的初学者，不到一周前就开始学习它。我没有收到错误，但我基本上希望当我按下开始时它会完成所有锻炼并告诉你有多少次重复，并让你在每次按下按钮时删除 1 组。但问题是由于某种原因，锻炼和虚拟锻炼之间的关系很奇怪。什么都有帮助！例如当

dummyWorkouts is [
{Object},
{Object}
]
workouts is [
{Object},
{Object},
{Object},
{Object}
]

但是对于默认设置，我认为将 dummyWorkouts 设置为锻炼时会出现问题。如果有更好的方法来做到这一点，那将是非常有帮助的另一个大问题是，当它逐个浏览锻炼列表时。将其限制为 2。

下面的部分要具体

setCurrentSets(currentSets-1)
if(currentSets == 1){
   if(dummyWorkouts.length > 1){
        setCurrentWorkout(dummyWorkouts[1])
        setCurrentSets(dummyWorkouts[1].sets)
        var index = dummyWorkouts.indexOf(dummyWorkouts[0])
        setDummyWorkouts(dummyWorkouts.splice(index, 1))
     }else{
        setDummyWorkouts(workouts)
        setCurrentWorkout(workouts[0])
        setCurrentSets(workouts[0].sets)
        setWorkout(false)
   }
}

import React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList, Alert, Button } from 'react-native';
import Header from './components/header';
import Workouts from './components/workouts';
import AddWorkout from './components/addWorkout';

export default function App() {
  const [workout, setWorkout] = useState(false);

  const [workouts, setWorkouts] = useState([
    { name: 'Pushups', key: '1', sets: '3', reps: '20' },
    { name: 'Test', key: '2', sets: '3', reps: '20' },
  ]);

  const [currentWorkout, setCurrentWorkout] = useState(workouts[0]);
  const [currentSets, setCurrentSets] = useState(3)
  const [dummyWorkouts, setDummyWorkouts] = useState();

  const pressHandler = (key) => {
    setWorkouts((prevWorkouts) => {
      return prevWorkouts.filter(workout => workout.key != key);
    })
  }

  const submitHandler = (text) => {
    if(text.length > 0){
      if(text.length <= 40){
        setWorkouts((workouts) => {
        return [
          { name: text, key: Math.random().toString(), reps: '10', sets: '3' },
          ...workouts
        ]
    })
      }else {Alert.alert('Whoops!', "You entered over 40 characters! Shorten it up a bit!", [{text: 'Close '}])}
    }else {Alert.alert('Whoops!', "You haven't entered anything!", [{text: 'Close '}])}
  }

  if(workout == false){
  return (
    <View style={styles.container}>
      <Header />
      <View style={styles.WorkoutButton}>
        <Button
          title='START'
          color='white'
          onPress={()=>{
            if(workouts.includes(workouts[0])){
              setDummyWorkouts([...workouts])
              setWorkout(true)
            }else{Alert.alert('Whoops!', "No workouts detected!", [{text: 'Close '}])}
          }}
        />
      </View>
      <View style={styles.content}>
        <AddWorkout submitHandler={(val) => {submitHandler}}/>
        <View style={styles.list}> 
          <FlatList 
            data={workouts}
            renderItem={({ item }) => (
              <Workouts item={item} pressHandler={pressHandler} />
            )}
          />
        </View>
      </View>
    </View>
  );}else if (workout == true  && workouts.includes(workouts[0])){
    return(
    <View style={styles.container}>
      <Header />
      <View style={styles.WorkoutButton}>
        <Button
          title='-'
          color='white'
          onPress={() => {
            setCurrentSets(currentSets-1)
            if(currentSets == 1){
              if(dummyWorkouts.length > 1){

                setCurrentWorkout(dummyWorkouts[1])
                setCurrentSets(dummyWorkouts[1].sets)
                var index = dummyWorkouts.indexOf(dummyWorkouts[0])
                setDummyWorkouts(dummyWorkouts.splice(index, 1)) //delete workout
              }else{
                setDummyWorkouts(workouts)
                setCurrentWorkout(workouts[0])
                setCurrentSets(workouts[0].sets)
                setWorkout(false)
              }
            }
          }}
        />
      </View>
      <View style={styles.WorkoutCard}>
        <Text style={styles.Workout}>
          {currentWorkout.name}
        </Text>
        <Text style={styles.Sets}>
          Sets Left
          {'\n'}
          {currentSets}
        </Text>
        <Text style={styles.Reps}>
          Reps
          {'\n'}
          {currentWorkout.reps}
        </Text>
      </View>
    </View>
    );}else{
        setWorkout(false)
        Alert.alert('Whoops!', "No workouts detected!", [{text: 'Close '}])
      }
}

//Style Sheet

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#3B3B3B',
  },
  content: {
    padding: 60,
    flex: 1,
  },
  list: {
    marginTop: 20,
    flex:1,
  },
  text: {
    color: 'white',

  },
  WorkoutButton: {
    backgroundColor: 'black',
    left: 140,
    bottom: 52,
    marginHorizontal: 150,
    borderRadius: 15,
    fontWeight: 'bold',
  },
  WorkoutCard: {
    backgroundColor: 'crimson',
    height: 600,
    width: 300,
    marginTop: 50,
    alignSelf: 'center',
    borderRadius: 50,
  },
  Workout: {
    fontSize: 50,
    fontWeight: '600',
    color: 'white',
    textAlign: 'center',
  },
  Sets: {
    fontSize: 50,
    fontWeight: '400',
    color: 'white',
    textAlign: 'center',
    top: 30,
  },
  Reps: {
    fontSize: 40,
    fontWeight: '400',
    color: 'white',
    textAlign: 'center',
    top: 50,
  },
});```

标签： javascriptnode.jsreact-native

javascript - 我如何让它在 React Native ( Logic ) 中工作

问题描述

解决方案

推荐阅读