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

Question

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

** Component.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

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

Answer 2

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

您应该 map 产品作为 Redux Todos Example

并添加在线演示，例如CodeSandBox 将有助于我们为您提供更好的建议

OK，根据codesandbox.io/s/products-forked-kmbwz的demo，这里至少有两个问题：

路由 ProductDetails 在下拉 select 机会后没有重新呈现，因为你没有更改 selectedProd 的引用。

查看this link I forked from yours，见文件/src/Components/ProductDetails.js第14-15行，我加了一个console.log来调试Component是否会重新渲染。而第 31-33 行，我通过解构赋值改变了 new selectedProd 的引用。当您单击下拉选项时，UI 将重新呈现，因为您会看到日志。

下拉组件有问题：

您将值绑定到 div。但是 div 没有 value 道具，你应该像我在第 54 行那样明确显示它。
点击下拉框的值部分会触发handleDropDownSelect事件，所以有时会看到NaN

我真的建议你遵循 official Redux Todos Example before you start. And the problem you face here is that, React naturally render the UI when data(props/state) change, so the reference of data is change or not is important to React. And as you play React longer, immutable data structure such as Immerjs 会有很大帮助。再一次，Redux 或 React 文档比我解释的更详细，阅读它们

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

Display selected value from dropdown using semantic ui React

reactjs

react-redux

semantic-ui