useSelector 不更新 UI答案

【问题标题】：useSelector doesnot update the UIuseSelector 不更新 UI
【发布时间】：2020-07-19 19:14:00
【问题描述】：

我有一个嵌套状态，例如：

bookingDetails = {
jobCards: [
    {
        details_id: '1',
        parts: [
            {...},
            {...}
        ]
    }
]}

现在我通过使用useSelector从父组件的props中获得了相应的jobCards组件，即detailsID：

    const jobCard = useSelector(state => state.bookingDetails.jobCards.find(item => item.details_id === detailsID))

我得到了一个 button，它成功地在各自的 jobCards 中的 parts 中添加了新对象，但不会更新 UI。我的bookingDetails减速机：

case 'ADD_PARTS':
        return {
            ...state,
            jobCards: state.jobCards.map(jobCard => {
                if (jobCard.details_id === action.id) {
                    jobCard.parts = [...jobCard.parts, { _id: uuid(), name: '' }]
                }
                return jobCard
            })
        }

【问题讨论】：

在 ui 组件中控制台日志 jobCard。在这里分享。然后看看是什么问题。
状态更新，组件是bootstrap modal，所以当我关闭并重新打开时，UI 正确呈现，console.log 在模态中也能正常工作

标签： reactjs redux react-hooks

【解决方案1】：

这样使用

const [isJobUpdated, setIsJobUpdated] = useState(false);

const jobCard = useSelector(state => state.bookingDetails.jobCards.find(item => item.details_id === detailsID))

useEffect(() => {
   setIsJobUpdated(!!jobCard.length);

}, [jobCard])

return (
   <>
     {isJobUpdated && <YourComponent />
   </>
)

注意：这不是最好的方法。您可能会面临重新渲染问题。只是为了检查这是否解决了您当前的问题。

【讨论】：

我没有得到初始渲染可能是因为 isJobUpdated 设置为 false
经验丰富的const jobCard = useSelector(state => state.bookingDetails.jobCards.find(item => item.details_id === detailsID)) 将其拆分为const jobCard = useSelector(state => state.bookingDetails.jobCards)，然后再进行查找。或者一旦模态触发，您可能会错过再次调度。

【解决方案2】：

忘记添加return语句。减速器应该是：

 case 'ADD_PARTS':
        return {
            ...state,
            jobCards: state.jobCards.map(jobCard => {
                if (jobCard.details_id === action.id) {
                    return {
                        ...jobCard,
                        parts: [...jobCard.parts, { id: uuid(), name: ''}]
                    }
                }
                return jobCard
            })
        }

【讨论】：