在傳遞給子組件的 function 內部反應全局變量未更新

Question

我有一個父組件，它有一些從祖父組件傳遞的道具，我正在使用一個道具（對象）並將 object 的值作為道具傳遞給子組件。 我還將 function 傳遞給子組件，以便從子組件中獲取更新的值。

父組件.js

const ParentComponent = props => {

    const { record, saveRecord } = props;

    const editedRecord = {...record}



    const handleRecordValues = (name, value) => {
       editedRecord[name] = value;
    };

...
    const content = <div>
       <ChildComponent name={record.name} value={record.value} setValue={handleRecordValues} />
       <Button onClick={() => saveRecord(editedRecord)} />
    </div>

    return content;
}

ChildrenComponent.js

const ChildComponent = props => {

    const { name, value, setValue } = props;
    const [input, setInput] = useState(value);

    const handleChange = (e, text) => {
        setInput(text);
        setValue(name, value);
    }


    return <TextField value={input} onChange={handleChange}/>
}

以上是我擁有的示例組件。 問題是當我將editedRecord 傳遞給saveRecord func 到祖父組件時，editedRecord 始終與從記錄復制的記錄相同，並且該變量的值不會更新。 我希望handleRecordValues 函數更新editedRecord。

例如，我得到的記錄是 {}。 我創建了一個新的 const 編輯記錄，它也是 {}。 在我從 ChildComponent 輸入一些值后，editedRecord 應該更新為 {name: value}。 但是，當我單擊 ParentComponent 中的 Button 時，editedRecord 參數仍然是 {}。

更新而不是使用 const 我使用

const [editedRecord, setEditedRecord] = useState(record);

const handleRecordValues = (name, value) => {

        const newRecord = {
            ...editedRecord
        };
        newRecord[name] = value;
        setEditedRecord(newRecord);
    };

現在editedRecord值得到了更新，但出現了另一個問題：當我有多個組件作為子組件時，它只會更新我輸入的最后一個條目。

Answer 1

你的setValue / handleRecordValues function 改變了一個變量......但是 React 無法知道該變量何時改變。

要讓 React 知道，您必須在進行更改后調用saveRecord(editedRecord) ，或者換句話說，您必須調用狀態設置 function，以便 React 知道更改。

一般來說，在 React 中，如果您不更改上下文/狀態/道具（對於上下文/狀態，這意味着使用適當的 React 函數這樣做），React 無法知道重新渲染您的組件作為響應。 這意味着您的組件依賴於渲染的任何數據都需要通過這三種機制之一進行更改，而不僅僅是通過普通的 Javascript，即。 ab = c 。

編輯：澄清評論中的一點。 當您制作 state 變量時：

const [myState, myStateSetter] = useState('');

myState沒有什么“魔法”； 它只是另一個 JS 變量。 Javascript 不會讓 React 知道變量何時發生變化，所以如果你這樣做：

 myState = 4;

React 不知道你這樣做了。 如果你告訴它它改變了，它只知道它改變了......即。 如果你打電話：

myStateSetter(4);

Answer 2

以下是我將如何更改父組件以使一切都與反應一起工作。 您遇到的主要問題是 react 需要知道發生了更改，因此我們需要將值設置為 state/set state。

const ParentComponent = props => {

    const { record, saveRecord } = props;
    const [editedRecord,setEditedRecord] = useState(record);
    useEffect(()=>{
        //This sets the record straight whenever the parent passes a new record.
        //You'd need to make sure the record is referentially stable when it isn't being updated, though
        setEditedRecord(record);
    },[record])

    const handleRecordValues = (name, value) => {
        setEditedRecord(record=>{...record,[name]:value});
    };

...
    const content = <div>
       <ChildComponent name={editedRecord.name} value={editedRecord.value} setValue={handleRecordValues} />
       <Button onClick={() => saveRecord(editedRecord)} />
    </div>

    return content;
}