Как переключить элементы с объекта, когда изначально нет начального состояния?

Question

парень помог мне с этим кодом

import React, { useEffect, useState } from "react";
import _ from "lodash";

// const SeleccionClientes = "";
const items = [
  {
    client: "Microsoft",
    idClient: 0,
    idProjectType: 1,
    projectType: "traditional",
    title: "React Native App"
  },
  {
    client: "Amazon",
    idClient: 1,
    idProjectType: 1,
    projectType: "traditional",
    title: "ServerSide OPS"
  },
  {
    client: "KFC",
    idClient: 2,
    idProjectType: 4,
    projectType: "traditional",
    title: "QR Reader"
  },
  {
    client: "KFC",
    idClient: 2,
    idProjectType: 1,
    projectType: "traditional",
    title: "React Native App"
  },
  {
    client: "KFC",
    idClient: 2,
    idProjectType: 1,
    projectType: "traditional",
    title: "React KKL"
  },
  {
    client: "PEICI",
    idClient: 3,
    idProjectType: 1,
    projectType: "traditional",
    title: "KuKluxKlan"
  }
];

export default function ListView() {
  const [list, setList] = useState(items);
  const [idClient, setIdClient] = useState(2);

  const displayProjectsForClient = idClient => {
    return list.filter(item => item.idClient === idClient);
  };
  const displayedProjects = displayProjectsForClient(idClient);

  // equivalent to componentDidMount()
  useEffect(() => {
    setList(displayedProjects);
  }, []);

  const updateFav = (val, ind) => {
    const tempData = _.cloneDeep(list);
    tempData[ind].fav = val;
    setList(tempData);
  };

  const favItems = _.filter(list, item => item.fav);
  const finalObject = { [new Date().toISOString()]: favItems };

  return (
    <div>
      Selected Client: "KFC"
      <br />
      Add Favorite Projects:
      {displayedProjects.map((item, index) => {
        return (
          <div
            key={index}
            style={{ margin: "5px", padding: "5px", background: "#D6D6D6" }}
          >
            <div>{item.title}</div>
            {`Project ID ${item.idProjectType}`}
            <input
              type="checkbox"
              value={item.fav}
              onChange={e => updateFav(e.target.checked, index)}
            />
          </div>
        );
      })}
      <div>
        Active projects (final object): <br />
        {JSON.stringify(finalObject, null, 2)}
      </div>
    </div>
  );
}

вместо флажка ввода, я использую переключатель response-native-elements, но не работает, я предполагаю, что это связано с не существующее избранное внутри объекта элемента

это мой код

        <FlatList
          data={dataSource}
          renderItem={({item, index}) => (
            <ListItem
              containerStyle={{backgroundColor: '#fafafa', width: wp('87.1%'), height: 64, alignItems: 'center', justifyContent: 'center', alignSelf: 'center', marginTop: hp('2.8%'), paddingHorizontal: 0}}
              topDivider={false}
              bottomDivider={true}
              titleStyle={{
                marginLeft: 0,
                fontSize: rfv(16),
                fontWeight: "normal",
                fontStyle: "normal",
                textAlign: "left",
                color: "#707070"
              }}
              subtitleStyle={{
                marginLeft: 0,
                fontSize: rfv(14),
                fontWeight: "normal",
                fontStyle: "normal",
                textAlign: "left",
                color: "#c4c4c4"
              }}
              title={`${item.title}`}
              subtitle={`ID ${item.idCliente}`}
              switch={{
                trackColor: { false: "#767577", true: "#81b0ff" },
                thumbColor: item.fav == true ? "#1062cc" : "#f4f3f4",
                ios_backgroundColor: "#9e9e9e",
                value: item.fav == undefined ? false : true, 
                onValueChange: () => {e => console.log(updateFav(e.target.checked == undefined ? false : true, index))}
              }}
            />
          )}
        />

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

забыл упомянуть, это функция

  const updateFav = (value, index) => {
    const tempData = _.cloneDeep(dataSource);
    tempData[index].fav = value;
    setDataSource(tempData);
  };

  const favItems = _.filter(dataSource, item => item.fav);

Answer 1

Вы используете смесь React (Html) и React native, вот в чем проблема. Чтобы эта функция работала, вам нужно будет сменить коммутатор таким образом. И нет необходимости проверять истинность ложности.

   switch={{
        trackColor: { false: "#767577", true: "#81b0ff" },
        thumbColor: item.fav == true ? "#1062cc" : "#f4f3f4",
        ios_backgroundColor: "#9e9e9e",
        value: item.fav, 
        onValueChange: () => {updateFav(!item.fav, index)}
      }}