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