通过 React 中的外部函数将项目添加到内部组件列表

Question

如何使用外部函数更新组件内的挂钩列表？要清楚，假设伪代码：

list.tsx

const lists = () => {

const [list, setlist] = useState([]);

return <>
          The fruits are:
          { list.map( x => <>x.name<br /></> ) }
       </>

}

export { lists }

index.tsx

import { lists } from './list'
...
<Lists /> 
<button onClick={ () => lists.setlist.push({name: 'banana'}) }>Add Banana</button>

欢迎任何研究提示。

我尝试了一些解决方案，例如使用“静态”并在 class 中导出一个函数，但没有成功。

Answer 1

最简单的方法是使用 useContext 钩子，然后标签的所有子元素都可以访问顶级状态

Answer 2

list.tsx

const lists = ({ list }) => {

return <>
          The fruits are:
          { list.map( x => <>x.name<br /></> ) }
       </>

}

index.tsx

const [list, setlist] = useState([]);

...
<Lists list={list} /> 
<button onClick={ () => setlist(prev => [..prev, {name: 'banana'}]) }>Add Banana</button>

状态在child

list.tsx

const lists = ({listsRef}) => {

const [list, setlist] = useState([]);

useEffect(() => {
  listsRef.current = (callback) => setlist(prev => callback(prev))
}, [])

return <>
          The fruits are:
          { list.map( x => <>x.name<br /></> ) }
       </>

}

index.tsx


const listsRef = useRef(null)

...
<Lists listsRef={listsRef} /> 
<button onClick={ () => listsRef.current(prev => [..prev, {name: 'banana'}]) }>Add Banana</button>

通过 React 中的外部函数将项目添加到内部组件列表

Add item to list inside component by outside function in React

reactjs

react-hooks

状态在child