javascript - React useEffect() 正在重新渲染，但动态值未反映在屏幕上

Question

当我单击“+”号时，我需要增加状态的值。即使 useEffect 正在运行，但状态的更改值不会更新屏幕上的文本。

初始状态：

const italianMenu = [
    {
        name: "White Sauce Pasta",
        price: "$15",
        type: "veg",
        qty: 0,
        itemId: "italian-1"
    },
    {
        name: "Red Sauce Pasta",
        price: "$15",
        type: "veg",
        qty: 0,
        itemId: "italian-2"
    }
]

这是功能组件：

const CheckForms = () => {
    const [italian, editItalian] = useState(italianMenu);
    const addMore = (e) => {
        const updatedMenu = italian.map( each => {
            if(each.itemId === e.target.id) {
                return {
                    ...each, qty: each.qty + 1
                }
            }
            else {
                return each;
            }
        });
        editItalian(updatedMenu);
    }
    const addLess = (e) => {
    }
    useEffect(() => {
        console.log(italian)        // output is perfect on console.log everytime
    }, [italian]);
    return (
        <div className="container CheckForms">
    <h1 className="header">Our Menu</h1>
    <hr />
    <h3 className="category">Italian</h3>
    { italianMenu.map((each) => {
        return (
            <FormCheck className="m-1">
            <div className="row justify-content-center">
                <div className="col-6">
                    <FormCheckInput type="checkbox" id="checkbox"/>
                    <FormCheckLabel className="" >{each.name}</FormCheckLabel>
                </div>
                <div className="col-2">
                    <FormCheckLabel className="" >{each.type}</FormCheckLabel>        
                </div>
                <div className="col-2">
                    <FormCheckLabel className="" >{each.price}</FormCheckLabel>
                </div>
                <div className="col-2">
                    <div className="row">

                        <div className="col-4"><span name={each.itemId}>-</span></div>
                        <div className="col-4"><FormCheckLabel className="" >{each.qty}</FormCheckLabel></div>
/********************************************
* NOT UPDATING ABOVE ^^^
********************************************/
                        <div className="col-4"><span id={each.itemId} onClick={addMore}>+</span></div>
                    </div>
                </div>
            </div>
            </FormCheck>
        )
    }) }
    </div>
    )
}

我想知道有什么问题。 当我单击 PLUS 跨度时，它会重新运行 useEffect 并且它也会更改状态，但它不会反映在 html 上

请帮忙。

标签： javascriptreactjsfrontendreact-hooks

Answer 1

You should map using state(italian not italianMenu) like:

{ italian.map((each) => {
        return (
            <FormCheck className="m-1">
            <div className="row justify-content-center">
                <div className="col-6">
                    <FormCheckInput type="checkbox" id="checkbox"/>
                    <FormCheckLabel className="" >{each.name}</FormCheckLabel>
                </div>
                <div className="col-2">
                    <FormCheckLabel className="" >{each.type}</FormCheckLabel>        
                </div>
                <div className="col-2">
                    <FormCheckLabel className="" >{each.price}</FormCheckLabel>
                </div>
                <div className="col-2">
                    <div className="row">

                        <div className="col-4"><span name={each.itemId}>-</span></div>
                        <div className="col-4"><FormCheckLabel className="" >{each.qty}</FormCheckLabel></div>
/********************************************
* NOT UPDATING ABOVE ^^^
********************************************/
                        <div className="col-4"><span id={each.itemId} onClick={addMore}>+</span></div>
                    </div>
                </div>
            </div>
            </FormCheck>
        )
    }) }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>