如何让React子组件自主访问并更新父组件的对象数组状态？

完全可以用React Context解决你的问题，它能让子组件直接访问父组件的状态和更新方法，不用再层层传递props。下面是基于你现有代码改造的完整示例：

核心改造步骤 #

• 创建ChildStateContext，封装父组件的状态管理逻辑
• 在App组件中通过ChildStateContext.Provider向后代组件提供上下文
• 子组件通过useContext钩子直接获取上下文里的状态和方法

<div id="root"></div>
<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.18.12/babel.min.js"></script>
<script type="text/babel" data-type="module" data-presets="env,react">

const { StrictMode, useState, createContext, useContext } = React;

// 1. 创建Context
const ChildStateContext = createContext();

function getInitialChildState () {
  return {
    hidden: false,
    id: window.crypto.randomUUID(),
    text: '',
  };
}

// 2. 子组件直接从Context获取数据和方法，无需props
function Child ({ childId }) {
  const { getChildState, updateChildState } = useContext(ChildStateContext);
  const state = getChildState(childId);
  const setText = (text) => updateChildState(childId, { text });

  return (
    <div className="vertical">
      <div>{state.text ? state.text : 'Empty 👀'}</div>
      <input
        type="text"
        onChange={ev => setText(ev.target.value)}
        value={state.text}
      />
    </div>
  );
}

function ChildListItem ({ childId }) {
  const { getChildState, updateChildState } = useContext(ChildStateContext);
  const state = getChildState(childId);
  
  const toggleHidden = () => updateChildState(childId, { hidden: !state.hidden });

  return (
    <li className="vertical">
      <button onClick={toggleHidden}>{
        state.hidden ? 'Show' : 'Hide'
      } child</button>
      {!state.hidden && <Child childId={childId} />}
    </li>
  );
}

function App () {
  const [childStates, setChildStates] = useState([]);

  const addChild = () => setChildStates(arr => [...arr, getInitialChildState()]);

  // 封装获取指定子组件状态的方法
  const getChildState = (id) => {
    return childStates.find(state => state.id === id) || {};
  };

  // 封装更新指定子组件状态的方法
  const updateChildState = (id, updatedChildState) => {
    setChildStates(states => {
      const childIndex = states.findIndex(state => state.id === id);
      if (childIndex === -1) return states;
      const statesCopy = [...states];
      statesCopy[childIndex] = {...statesCopy[childIndex], ...updatedChildState};
      return statesCopy;
    });
  };

  // 3. 用Provider包裹后代组件，传递上下文值
  return (
    <ChildStateContext.Provider value={{
      childStates,
      addChild,
      getChildState,
      updateChildState
    }}>
      <div>
        <h1>Parent</h1>
        <button onClick={addChild}>Add child</button>
        <ul className="vertical">
          {childStates.map(state => (
            <ChildListItem
              key={state.id}
              childId={state.id}
            />
          ))}
        </ul>
      </div>
    </ChildStateContext.Provider>
  );
}

const reactRoot = ReactDOM.createRoot(document.getElementById('root'));
reactRoot.render(
  <StrictMode>
    <App />
  </StrictMode>
);

</script>

关键说明 #

• Context封装：把所有和子组件状态相关的逻辑（获取、更新、添加）都放进Context，后代组件只需通过useContext就能拿到这些能力
• 仅传递必要标识：子组件只需要接收childId来定位自己的状态，不用再传递整个state和updateState方法
• 保持状态不可变性：更新状态的逻辑和你原来的实现一致，确保每次更新都返回新的数组和对象，符合React的状态更新规则

内容的提问来源于stack exchange，提问作者Ae Leung