未从列表中的按钮调用单选按钮选中的属性

Question

[我想编写一个React组件，向用户提供可以使用Semantic UI中的单选按钮接受或拒绝的建议列表。

我的应用看起来像这样。

import React from "react";
import "./App.css";
import {Proposals} from "./components/Proposals";

function App() {
    const proposals = [
        {id: "1", context: "The cat is happy."},
        {id: "2", context: "The triangle is blue."}
    ];

    return (
        <div>
            <Proposals proposals={proposals}/>
        </div>
    )
}

export default App;

我的提案组件看起来像这样。

import React, {useState} from "react"
import {Form, Header, List, Radio} from "semantic-ui-react";

export const Proposals = ({proposals}) => {
    const [judgments, setJudgments] = useState(
        proposals.reduce((result, proposal) => {
            result[proposal.id] = {accept: false, reject: false};
            return result;
        }, {})
    );

    const judge = (id) => {
        return function (e, {value}) {
            judgments[id].accept = value === "accept";
            judgments[id].reject = value === "reject";
            setJudgments(judgments)
        };
    };

    return (
        <div id="proposals">
            <Header>Proposals</Header>
            <List>
                {proposals.map(proposal => {
                        return (
                            <List.Item key={proposal.id}>
                                <div>{proposal.context}</div>
                                <Form>
                                    <Form.Group inline>
                                        <Radio label="Accept"
                                               value="accept"
                                               name="accept-reject"
                                               checked={judgments[proposal.id].accept}
                                               onChange={judge(proposal.id)}/>
                                        <Radio label="Reject"
                                               value="reject"
                                               name="accept-reject"
                                               checked={judgments[proposal.id].reject}
                                               onChange={judge(proposal.id)}/>
                                    </Form.Group>
                                </Form>
                            </List.Item>
                        )
                    }
                )}
            </List>
        </div>
    )
};

[我正在做的棘手的事情是将我的onChange处理程序judge编写为闭包，以便我可以传入正在执行的提案的ID。这可行。单击单选按钮时，将调用judge函数，如果我将其值记录到控制台，它们看起来都正确。

但是，单选按钮的状态在单击时不会改变。如果我使checked属性调用一个也记录到控制台的函数，我将看到它仅在应用程序加载时被调用一次，而不再被调用。

我将same pattern与单个广播组一起使用，它工作正常。大概列表中的单选按钮有些混乱，但我不知道那是什么。

---

根据以下答案的建议，我将judge函数更改为以下内容。

const judge = (id) => {
    return function (e, {value}) {
        setJudgments(prev => {
            if (prev.id !== id) return prev;
            return {
                ...prev,
                accept: value === "accept",
                reject: value === "reject"
            }
        })
    }
};

我有同样的问题。

虽然这似乎与我的updating state不正确有关。

Answer 1

judge上的闭包没有错。您的问题是您正在变异state

judgments[id].accept = value === "accept"

您应该使用useState setter的更新程序版本来设置状态。

喜欢这个

return function (e, {value}) {
     setJudgments(prev =>({
         ...prev,
         [id] : value
     }))
};