React Native - модифицирующий родительский массив childs - PullRequest
Новая
       2

React Native - модифицирующий родительский массив childs

0 голосов
/ 26 января 2020

У меня есть эта проблема в моем приложении React Native. У меня есть пользовательские компоненты - TimeButtonCheck, который содержит флажок со временем. Пользователь может ставить / снимать эти флажки по своему усмотрению, а затем отправлять информацию о проверенных флажках на сервер. Дело в том, что я могу только заставить эти дочерние компоненты изменять свои собственные массивы времен, я не знаю, как заставить их изменять массив времен в родительском компоненте. Вот мой дочерний компонент TimeButtonCheck: 

const TimeButtonCheck = props => {
const [ceknute, setCeknute] = useState(true);
const [pole, setPole] = useState(["9:00", "10:00", "11:00"]);

const checkHandler = (id) => {
    setCeknute(!ceknute);
    if(!ceknute) {
        const novePole = pole.slice();
        novePole.push(id);
        console.log("pushuj");
        setPole(novePole);
        console.log(novePole);
    }
    else
    {
        console.log("filtruj");
    }

};
return (
        <View style={styles.customButon}>
        <CheckBox
        checked = {ceknute}
        key = {props.key}
        onPress={(key) => {checkHandler(key)}}
        checkedColor = {Colors.primaryColor}
        containerStyle = {{padding:0,}}
        />

            <TouchableOpacity activeOpacity={0.5}>
                <Text 
                style={styles.textInButton}>
                {props.cas}
                </Text>
            </TouchableOpacity>
        </View>
);

А вот мой родительский компонент, который рендерит многие дочерние компоненты с помощью функции карты: 

 const JazdyInstruktor = props => {
    const pole = ["8:00", "9:00", "10:00"];
  const selectedStartDate = null;
  const [isLoading, setIsLoading] = useState(true);
  const [displayText, setDisplayText] = useState(true);
  const dataToMap = ["11:00", "12:00", "13:00", "14:00", "15:00"];


 const maper = (data) => {
    return(
      <View style = {{marginHorizontal: 18,}}>
      <View style ={styles.instruktor}>
      <InstruktorBar />
      </View>
      <View style = {styles.screen}>
      {data.map((item) => {
        return ( 
        <TimeButtonCheck
         key = {item}
         cas={item}
         />
   )})}
      </View>
      </View>
    );
  }

  const startDate = selectedStartDate ? selectedStartDate.toString() : '';
  const token = useSelector(state => state.auth.token);

    return(
    <View style={styles.container}>
    <CalendarPicker 
    onDateChange={dateChangeHandler}
    />
    <View>
    {(isLoading) ? ((displayText) ? (<View style={styles.centered}><Text>Pre zobrazenie volnych terminov si vyberte datum</Text></View>) : (<View style = {{paddingTop: 10,
      textAlign: 'center',}}><ActivityIndicator size='large' color={Colors.primaryColor}/></View>)) : **maper(dataToMap)**}
    </View>

    </View>

Я хочу, чтобы эти TimeButtonCheck изменили массив с именем "полюс" в моем родительском компоненте, а затем отправить измененный массив на сервер. Я попытался сделать обратный вызов, чтобы checkHandler был в родительском компоненте, но я не смог контролировать состояние отмеченных / непроверенных флажков. Если у вас есть идеи, я буду рад узнать. Спасибо:)

...