当首先没有初始状态时，如何从 object 切换元素？

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>
  );
}

我正在使用 react-native-elements 开关而不是输入复选框，但它不起作用，我假设是由于项目 object[=14= 中不存在的收藏夹]

这是我的代码

        <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))}
              }}
            />
          )}
        />

我的想法是列出正在做的项目，但是当我点击一个开关时，它会根据那个 "selection" 创建一个全新的 object，问题是，开关是立即到达原位，

忘了说了，就是这个功能

  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 才能使该功能正常工作。也不需要检查真假。

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

当首先没有初始状态时，如何从 object 切换元素？

How do i switch elements from object, when there are no initial state in the first place?

javascript

arrays

typescript

react-native

react-native-elements