使用语义 ui React 从下拉列表中显示选定的值

Question

我真的是 React 的新手，Redux。 我正在尝试从下拉列表中显示选定的值，使用语义 ui。 我在 state 更新但无法在屏幕上显示值，并且下拉列表未关闭（添加后 closeOnChange- 无法识别此属性，为什么？}

** 组件.js**

const ProductDetails = () => {
    const {productId} = useParams()
    
    const selectedProd = useSelector((state) => state.allProducts.products.find(product => 
        product.id === parseInt(productId)
        ));
    const products = useSelector((state) => state.allProducts.products)       
    let {rank} = selectedProd    
    const dispatch = useDispatch()  
    const handleDropDownSelect = (event) => {
        //update rank
        selectedProd.rank = parseInt(event.dataset.value)       
        //update allProducts
        dispatch(updateProducts(products,selectedProd))        
    }
return(
<div className="ui left floated simple selection dropdown"   value={rank} onClick={e=>handleDropDownSelect(e.target)}>
                                <i className="dropdown icon"></i>
                                <div className="default value" value={rank}></div>
                                <div className="left floated menu" >
                                <div className="item" data-value="1" data-key="1">1</div>
                                <div className="item" data-value="2" data-key="2">2</div>
                                <div className="item" data-value="3" data-key="3">3</div>
                                <div className="item" data-value="4" data-key="4">4</div>
                                <div className="item" data-value="5" data-key="5">5</div>
                                </div>
                            </div>)

redux/reducers/actions.js

export const updateProducts = (products,product) => {
    const indexOfItem = products.findIndex(q => q.id === product.id);
    if (indexOfItem > -1) {
        products[indexOfItem] = product;
     }
    return {
        type: ActionTypes.SET_PRODUCTS,
        payload: products
    };
};

redux/constans/types.js

export const ActionTypes = {
    SET_PRODUCTS: "SET_PRODUCTS",   
}

redux/reducers/index.js

import { combineReducers } from 'redux'
import { productReducer} from './productReducer'

const reducers = combineReducers({
    allProducts: productReducer,    
})

export default reducers

我错过了什么？

Answer 1

这很可能是您没有更改state.allProducts.products的引用，因此 React 不会重新渲染 UI

您应该将map产品作为Redux Todos 示例

并添加一个在线演示，如CodeSandBox将帮助我们为您提供更好的建议

好的，根据codesandbox.io/s/products-forked-kmbwz的演示，这里我们至少有两个问题：

1. Route ProductDetails在下拉 select 机会后没有重新呈现，因为您没有更改selectedProd的引用。

查看我从你的分叉的这个链接，查看第 14-15 行的文件/src/Components/ProductDetails.js ，我添加了一个 console.log 来调试组件是否会被重新渲染。 在第 31-33 行，我通过解构赋值更改了 new selectedProd的引用。 当您单击下拉选项时，UI 将重新呈现，因为您会看到日志。

2. 下拉组件有问题：

• 您将值绑定到div 。 但是div没有value属性，你应该像我在第 54 行那样显式显示它。
• 点击下拉菜单的值部分会触发handleDropDownSelect事件，所以有时候会看到NaN

我真的建议您在开始之前遵循官方的 Redux Todos 示例。 而你在这里面临的问题是，React 会在数据（props/state）发生变化时自然呈现 UI，因此数据的引用是否发生变化对 React 很重要。 随着你玩 React 的时间越长， Immerjs 之类的不可变数据结构就会有很大帮助。 再一次，Redux 或 React 文档比我解释的要详细得多，阅读它们

Answer 2

我们想帮助您，但代码太少（尤其是缺少 redux 部分以及您如何传递值/函数来反应组件）。 请链接您的存储库/向我们展示更多代码。