React Native中如何在多个子组件间共享和更新状态？

Air-佩佩提问于 2026-02-10 12:55:26 阅读 16

框架

在开发一个待办事项列表时，我需要让两个子组件（列表和输入框）共享同一个状态数组。现在父组件通过props传递状态和set函数，但修改状态后界面没及时更新，甚至出现“Maximum update depth exceeded”错误。试过用useEffect监听状态变化，但子组件还是获取不到最新数据。

父组件代码大致这样写：


function TodoList() {
  const [todos, setTodos] = useState([]);
  return (
    <View>
      <TodoInput onChange={newTodo => setTodos([...todos, newTodo])} />
      <TodoItems list={todos} onDelete={(id) => setTodos(todos.filter(t => t.id !== id))} />
    </View>
  );
}

子组件直接通过props接收数据，但删除操作时总是报“Can’t perform a React state update on an unmounted component”错误，这该怎么解决？

我来解答赞 3 收藏

反馈

2 条解答

慧娜 Dev Lv1

状态传递没问题，问题出在子组件可能持有旧引用或重复渲染。把 setTodos([...todos, newTodo]) 改成函数式更新：setTodos(prev => [...prev, newTodo])，删除同理用 setTodos(prev => prev.filter(...))。

这样避免闭包捕获过时的 todos。就这样。

2026-02-11 15:21

毓君酱~ Lv1

我一般直接用React的useState和回调函数传下去，你那个无限更新是因为每次渲染都创建了新数组引用，导致子组件不断触发更新。把setTodos的逻辑包一层 useCallback 就好了。

function TodoList() {

  const [todos, setTodos] = useState([]);



  const addTodo = useCallback((newTodo) => {

    setTodos(prev => [...prev, newTodo]);

  }, []);



  const deleteTodo = useCallback((id) => {

    setTodos(prev => prev.filter(t => t.id !== id));

  }, []);



  return (

    

      

      

    

  );

}

子组件别在render里直接调用onXXX()，要通过事件触发，比如按钮点击再删，不然容易误更新。那个unmounted警告是因为你在异步操作后还去改state，加个isMounted判断或者用useEffect清理就行，但最省事就是确保别在组件卸载后还调setState。

2026-02-10 13:01