React-native 应用程序从子级更新父级时挂起

Question

我在这里有一个奇怪的行为。

我正在尝试从孩子更新父组件。

因此，我为孩子做了这样的事情：

const LabelList = ({editable, boardLabels, cardLabels, size='normal', udpateCardLabelsHandler}) => {
     return (
            <DropDownPicker
                labelStyle={{
                    fontWeight: "bold"
                  }}
                badgeColors={badgeColors}
                showBadgeDot={false}
                items={items}
                multiple={true}
                open={open}
                onChangeValue={(value) => udpateCardLabelsHandler(value)}
                value={value}
                setOpen={setOpen}
                setValue={setValue} />
        )
}

而且，对于父母来说，是这样的：

const CardDetails = () => {
    const [updatedCardLabels, setUpdatedCardLabels] = useState([])
    const [card, setCard] = useState({})
    const [editMode, setEditMode] = useState(false)

    // Handler to let the LabelList child update the card's labels
    const udpateCardLabelsHandler = (values) => {
        const boardLabels = boards.value[route.params.boardId].labels
        const labels = boardLabels.filter(label => {
            return values.indexOf(label.id) !== -1
        })    
        console.log('updated labels',labels)
        setUpdatedCardLabels(labels)
    }

    return (
        <View style={{zIndex: 10000}}>
              <Text h1 h1Style={theme.title}>
                   {i18n.t('labels')}
              </Text>
              <LabelList 
                    editable = {editMode}
                    boardLabels = {boards.value[route.params.boardId].labels}
                    cardLabels = {card.labels}
                    udpateCardLabelsHandler = {udpateCardLabelsHandler} />
            </View>
     )

而且，这根本行不通：只要我尝试更改 DropDownPicker 中的某些内容，应用程序就会挂起。 console.log语句甚至没有执行，我的 expo 控制台中也没有出现错误。

奇怪的是，例如，如果我将updateCardLabels state 更改为 boolean ，一切正常（例如：执行console.log语句）：

const [updatedCardLabels, setUpdatedCardLabels] = useState(false)

// Handler to let the LabelList child update the card's labels
const udpateCardLabelsHandler = (values) => {
    const boardLabels = boards.value[route.params.boardId].labels
    const labels = boardLabels.filter(label => {
        return values.indexOf(label.id) !== -1
    })    
    console.log('updated labels',labels)
    setUpdatedCardLabels(true)
}

请注意， updatedCardLabels没有在任何地方使用：它是一个虚拟变量，我只是用来调试这个问题（以确保我没有以一些无休止的渲染循环或类似的东西结束）。

为了完整起见，这是行console.log('updated labels',labels)的labels的样子（请不要说我只能在执行setUpdatedCardLabels(true)时看到此值，否则，当代码执行setUpdatedCardLabels(labels) ，console.log 语句不执行，如前所述）：

updated labels Array [
  Object {
    "ETag": "a95b2566521a73c5edfb7b8f215948bf",
    "boardId": 1,
    "cardId": null,
    "color": "CC317C",
    "id": 9,
    "lastModified": 1621108392,
    "title": "test-label",
  },
]

有人对这种奇怪的行为有解释吗？

此致，

西里尔

Answer 1

所以，我发现了问题：这是 DrowpDownPicker 的副作用。

我已经通过改变我的孩子来解决它，如下所示：

const LabelList = ({editable, boardLabels, cardLabels, size='normal', udpateCardLabelsHandler}) => {

    const [open, setOpen] = useState(false);
    const [value, setValue] = useState(cardLabels.map(item => item.id));

    const theme = useSelector(state => state.theme)

    // Updates parent when value changes
    useEffect(() => {
        if (typeof udpateCardLabelsHandler !== 'undefined') {
            udpateCardLabelsHandler(value)
        }
    }, [value])

        return (
            <DropDownPicker
                labelStyle={{
                    fontWeight: "bold"
                  }}
                badgeColors={badgeColors}
                showBadgeDot={false}
                items={items}
                multiple={true}
                open={open}
                value={value}
                setOpen={setOpen}
                setValue={setValue} />
        )