卸载屏幕后重置状态 - 挂钩？

Question

从 API 获取数据后，我将其设置为状态，并在 Flatlist 中呈现项目，

当我从中选择任何项目时，我会操作数据并向名为“toggle: true”的项目对象添加一个新属性

当我从列表中选择任何项目时效果很好，我添加了一个基于的边框toggle，但是当我返回上一个屏幕然后重新打开列表屏幕时，我可以看到在项目周围呈现的边框，尽管我在卸载时重置了状态屏幕

那么我在这里犯了什么错误？

代码片段

数据

export default {

  ...

  services: [

    {

      id: 0,

      name: 'nameS0',

      logo:

        'https://cdn2.iconfinder.com/data/icons/hotel-98/64/hair-dryer-tools-beauty-hairdressing-512.png',

      price: 19.99,

    },

  

  ],

  employees: [

    {

      id: 0,

      name: 'name0',

      img:

        'https://www.visualelementmedia.com/wp-content/uploads/2015/04/person-4-400x629.jpg',

    },

    ...

  ],

};

const VendorProfile = ({navigation}) => {

  const [services, setServices] = React.useState(null);

  const [employees, setEmployees] = React.useState(null);

  const [serviceSelected, setServiceSelected] = React.useState(null);

  const [employeeSelected, setEmployeeSelected] = React.useState(null);

  

  // For selected Item (services, employees)

  const itemSelected = (data, id) => {

    const updated = data.map((item) => {

      item.toggle = false;

      if (item.id === id) {

        item.toggle = true;

        data === services

          ? setServiceSelected(item)

          : setEmployeeSelected(item);

      }

      return item;

    });

    data === services ? setServices(updated) : setEmployees(updated);

  };

  ...

  const renderEmployees = ({item}) => {

    return (

      <TouchableOpacity

        onPress={() => itemSelected(employees, item.id)}

        delayPressIn={0}

        style={styles.employeeContainer}>

        <EmployeePattern style={{alignSelf: 'center'}} />

        <View style={styles.employeeLogo}>

          <Image

            source={{uri: item.img}}

            style={[styles.imgStyle, {borderRadius: 25}]}

          />

    );

  };

Answer 1

好吧，在尝试了多次之后，我明白了改变这个&nbsp;const&nbsp;updated&nbsp;=&nbsp;data.map((item)&nbsp;=>&nbsp;{对此&nbsp;const&nbsp;updated&nbsp;=&nbsp;data.map((old)&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;item&nbsp;=&nbsp;{...old};请确保一切正常，我们没有破坏任何东西 :)在您的 ItemSelected 函数上，您传递了整个员工列表，现在可以通过它了，但是当您更改此列表中的一个项目而不“重新创建它”时，对该项目的引用仍然是相同的“因为它是一个对象”的意思我们正在修改原始项目，并且由于我们这样做，项目保留了它的旧引用，避免这种情况的最佳方法是重新创建对象，希望这能给你一个想法。