React JS：如何从子组件为父组件数组指定索引元素赋值

要实现子组件修改父组件数组指定索引的元素，核心是遵循React的不可变状态原则，并通过回调函数让子组件通知父组件更新状态。以下是具体修改方案：

1. 修复父组件的状态管理问题 #

直接修改results数组（比如results.length = 20、results[3] = 'kiss'）属于直接变更state，不会触发React重渲染，也违反了state不可变的规则。需要通过setResults来更新数组。

修改后的父组件代码：

import React, { useState, useEffect } from 'react';
import './style.css';
import Comp from './Component.js';

export default function App() {
  // 初始化长度为20的数组，默认值为null
  const [results, setResults] = useState(() => Array(20).fill(null));

  // 初始化示例值（通过setResults更新，而非直接修改原数组）
  useEffect(() => {
    setResults(prev => {
      const newArr = [...prev];
      newArr[3] = 'kiss';
      newArr[2] = [12, 454, 45];
      return newArr;
    });
  }, []);

  // 定义更新指定索引元素的回调函数
  const updateResultAtIndex = (index, value) => {
    setResults(prev => {
      const newArr = [...prev];
      newArr[index] = value;
      return newArr;
    });
  };

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      {/* 传递对应索引的值，以及更新回调函数 */}
      <Comp 
        result={results[5]} 
        onUpdate={(value) => updateResultAtIndex(5, value)} 
      />
      <button onClick={() => console.log(results)}> SHOW </button>
    </div>
  );
}

2. 修改子组件，通过回调更新父组件状态 #

子组件不能直接修改props（props是只读的），需要调用父组件传递的回调函数来触发状态更新。

修改后的子组件代码：

import React from 'react';

const Comp = ({ result, onUpdate }) => {
  // 示例：点击按钮时更新父组件数组索引5的值为1
  const handleUpdate = () => {
    onUpdate(1);
    console.log('更新后的值:', 1);
  };

  return (
    <div>
      <p>当前值: {result ?? '未设置'}</p>
      <button onClick={handleUpdate}>设置为1</button>
    </div>
  );
};

export default Comp;

关键说明 #

• 不可变状态：每次更新数组时，都要创建一个新数组（[...prev]），而不是修改原数组，这样React才能检测到状态变化并触发重渲染。
• 回调传递：子组件通过父组件提供的onUpdate回调，将新值传递给父组件，由父组件负责更新state，这是React中父子组件通信的标准方式。
• 适配动态问卷：如果问卷问题数量不固定，可以根据实际需求动态生成数组长度，或者用对象存储结果（键为问题ID/索引，值为答案），逻辑完全通用。

内容的提问来源于stack exchange，提问作者Jurgen Tafaj