如何从数组中的组件获取数据？答案

【问题标题】：How to get data from components that are in an array?如何从数组中的组件获取数据？
【发布时间】：2022-11-03 03:38:47
【问题描述】：

https://playcode.io/997073

在通过按下“添加练习”按钮并更新相应的“测试”组件呈现测试组件后，我无法尝试获取用户输入的数据（练习名称、组数、重量、代表）每组表单所属的练习数组。我正在尝试返回练习数组，使其包含测试组件，每个组件都包含每组输入信息。

【问题讨论】：

这回答了你的问题了吗？ How to pass data from child component to its parent in ReactJS?
您需要将状态存储在父组件中并将其传递给子组件，而不是反过来。
如果在父组件而不是子组件中初始化状态会是什么样子？对不起，如果我在理解上有一点困难！
下面的答案能回答你的问题吗？

标签： javascript reactjs frontend

【解决方案1】：

与其检索数据来创建数组，不如从数据作为数组开始并向下传递数据更容易。这意味着您需要将状态从子 (<Test>) 组件移动到父 (<Popup>)。

幸运的是，您的代码结构不需要改变太多。

现在你有这样的东西（为了简化）：

function Popup() {
    const [exercises, setExercises] = useState([]);

    const addExercise = () => {
        setExercises([...exercises, Test])
    }
    
    const removeExercise = (i) => {
        let data = [...exercises];
        data.splice(i,1);
        setExercises(data);
    }

    return (
        <div>
            <button onClick={addExercise}>Add Exercise</button>

            {exercises.map((item,i) => {
                return (
                    <div key={i}>
                        <button onClick={() =>removeExercise(i)}>Remove Exercise</button>
                        <Test/>
                    </div>
                )
            })}
        </div>
    )
}

function Test() {
    const [inputFields, setInputFields ] = useState([{setnumber: '', weight: '', rep: ''}])

    return <div>{/* render content */}</div>
}

像这样的东西是你想要的：

function Popup() {
    const [exercises, setExercises] = useState([]);

    const addExercise = () => {
        // This is the main change, we store the data, not the component in state
        setExercises([...exercises, {setnumber: '', weight: '', rep: ''}]);
    }
    
    const removeExercise = (i) => {
        // Same logic as before, just changed to using a callback to get the current version of exercises
        setExercises(prev => {
            const data = [...prev];
            data.splice(i,1);
            return data;
        });
    }

    const setExercise = (index, value) => {
        setExercises(prev => prev.map((e, i) => i === index ? value : e));
    }

    return (
        <div>
            <button onClick={addExercise}>Add Exercise</button>

            {exercises.map((item,i) => {
                return (
                    <div key={i}>
                        <button onClick={() =>removeExercise(i)}>Remove Exercise</button>
                        <Test inputFields={item} setInputFields={(value) => setExercise(i, value)}/>
                    </div>
                )
            })}
        </div>
    )
}

// The `inputFields` and `setInputFields` props work exactly like those created from using `useState`
function Test({ inputFields, setInputFields }) {
    return <div>{/* render content */}</div>
}

【讨论】：