javascript - 从子组件更新 react 状态(对象数组)

Question

我想从子组件更新父状态，它呈现对象数组中的每个对象。子组件的主要目标是更新对象数组中的原始值。

我有以下代码

父级:

import { useState } from 'react';
import ExpenseItem from './expenseItem';

function Update({ data }) {
    const [ expenses, setExpenses ] = useState(data);
    return (
        <div>
            {expenses.map((expense, index) => {
                return <ExpenseItem key={index} {...expense} />;
            })}
            <button>Save</button>
        </div>
    );
}

export default Update;

child :

import { useState, useRef } from 'react';

function ExpenseItem({ description, date, credit, debit }) {
    const [ edit, setEdit ] = useState(false);
    const [ expenseDescription, setExpenseDescription ] = useState(description);
    const textInput = useRef();
    const renderDefaultView = () => {
        return <h3 onDoubleClick={() => setEdit(true)}>{expenseDescription}</h3>;
    };
    const renderEditView = () => {
        return (
            <div>
                <input
                    type="text"
                    ref={textInput}
                    defaultValue={expenseDescription}
                    onDoubleClick={() => setEdit(true)}
                />
                <button onClick={() => setEdit(false)}>X</button>
                <button onClick={() => updateValue()}>OK</button>
            </div>
        );
    };
    const updateValue = () => {
        const value = textInput.current.value;
        setExpenseDescription(value);
        textInput.current.defaultValue = value;
        setEdit(false);
    };
    return (
        <div>
            {edit ? renderEditView() : renderDefaultView()}
            <span>{date}</span>
            <p>{debit}</p>
            <p>{credit}</p>
        </div>
    );
}

export default ExpenseItem;

Answer 1

一种方法是通过 props 将父状态属性 (expenses) 和更新它的函数 (setExpenses) 传递给子组件:

父级:

import { useState } from 'react';
import ExpenseItem from './ExpenseItem';

function Update({ data }) {
    const [ expenses, setExpenses ] = useState(data);
    return (
        <div>
            Checking: { expenses[0].description } | { expenses[1].description }
            <hr/>
            {expenses.map((expense, index) => {
                return <ExpenseItem key={index} index={index} expenses={expenses} setExpenses={setExpenses} />;
            })}
            <button>Save</button>
        </div>
        );
}

export default Update;

child :

import { useState, useRef } from 'react';

function ExpenseItem( props ) {
    let { description, date, credit, debit } = props.expenses[props.index];
    const setExpenses = props.setExpenses;
    const [ edit, setEdit ] = useState(false);
    const [ expenseDescription, setExpenseDescription ] = useState(description);
    const textInput = useRef();
    const renderDefaultView = () => {
        return <h3 onDoubleClick={() => setEdit(true)}>{expenseDescription}</h3>;
    };
    const renderEditView = () => {
        return (
            <div>
                <input
                    type="text"
                    ref={textInput}
                    defaultValue={expenseDescription}
                    onDoubleClick={() => setEdit(true)}
                />
                <button onClick={() => setEdit(false)}>X</button>
                <button onClick={() => updateValue()}>OK</button>
            </div>
        );
    };
    const updateValue = () => {
        const value = textInput.current.value;
        setExpenseDescription(value);
        textInput.current.defaultValue = value;
        setEdit(false);
        const expenses = [ ...props.expenses ]; // Get a copy of the expenses array
        // Replace the current expense item
        expenses.splice( props.index, 1, {
            description: value, date, credit, debit
        }); 
       // Update the parent state
        setExpenses( expenses );
        
    };
    return (
        <div>
            {edit ? renderEditView() : renderDefaultView()}
            <span>{date}</span>
            <p>{debit}</p>
            <p>{credit}</p>
        </div>
    );
}

export default ExpenseItem;

Working demo

• 随着您的前进，这可能会变得非常复杂，因此最好的选择是寻找某种状态管理解决方案，例如使用 Context API .

• 另外，请看一下这篇有趣的文章，其中讨论了使用 map 索引值作为 key 值:Index as a key is an anti-pattern