Question

我并不陌生，但是我使用钩子是新手，今天我正在玩一系列选定的元素和选择/取消选择。

如果选择了它们，则会显示一个图标，如果未显示，则显示另一个图标（我只是更改名称prop，而不是组件本身。

我所做的每个console.log都会显示正确的结果，但是在JSX上无法正常工作。

取消选择后，渲染似乎仅重新加载（显示右侧图标）。列出程序和我的问题的清单：

所有元素都被选中
我取消选择一个元素（从列表中删除），图标随之更改。
我重新选择元素（添加到列表），图标不变。
我取消选择另一个元素，然后它起作用了，组件是重新加载

这是我的对象数组：

const dies = [
  {
    id: 1,
    nomDia : 'Dies',
    dataDia : 'previs'
  },
  {
    id: 2,
    nomDia : 'Dies',
    dataDia : 'previs'
  },
  {
    id: 3,
    nomDia : 'Dies',
    dataDia : 'previs'
  }
]

这是useSate声明：

const [diesSeleccionats, setDiesSeleccionats] = useState(dies)

以下是检查是否选中的功能以及在选定列表中添加/删除的功能：

// check if selected
const estaSeleccionat = (dia) => {
    return diesSeleccionats.findIndex((aDia) => aDia.id === dia.id ) != -1
  }
// remove selected or add selected
const gestionarSeleccionats = (dia) => {
    if(estaSeleccionat(dia)){
      return diesSeleccionats.filter((aDia) => aDia.id !== dia.id)
    } else {
      diesSeleccionats.push(dia)
      return diesSeleccionats
    }
 }

以下是组件：

   dies.map((dia) => (
                      <View key={dia.id} style={{flexDirection: 'row', marginTop: 5, alignSelf: 'flex-end'}}>
                        <TouchableOpacity
                          style={{backgroundColor: Colors.llistat1 + 'CC'}}
                          key={dia.id}
                          onPress={() => setDiesSeleccionats(gestionarSeleccionats( dia ))}
                        >
                            <Text style={{fontSize: 18, color: Colors.titolsPantalles}}> {dia.nomDia} </Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                          style={{
                            minWidth: 24,
                            backgroundColor: Colors.llistat1 + 'CC',
                            marginLeft: 5,
                            paddingHorizontal:5,
                            justifyContent:'center', alignItems: 'center'}}
                          onPress={ () => setDiesSeleccionats(gestionarSeleccionats( dia ))}
                          >
                          <Ionicons name={ estaSeleccionat( dia ) ? "md-checkmark" : "md-close"} size={18} color={Colors.titolsPantalles} />
                        </TouchableOpacity>
                      </View>
                    ))

您可以看到，如果该元素在所选列表中，那么定义的是<< em> Ionicons >名称。

我每次重新渲染的日志显示正确的结果。（检查函数的布尔值，以及对象数组上的正确元素）

谢谢。

Answer 1

我认为问题与更改diesSeleccionats而不是复制有关。我认为您需要对其进行复制以提供给setDiesSeleccionats，以便React可以分析差异并呈现正确的更新状态。

const gestionarSeleccionats = (dia) => {
    const selections = [...diesSeleccionats];
    if(estaSeleccionat(dia)){
      return selections.filter((aDia) => aDia.id !== dia.id);
    } else {
      selections.push(dia)
      return selections;
    }
 }

组件未重新加载，但状态随useState改变

1 个答案: