我使用的是功能组件.我使用useRef来存储previousValueCount，因为我不希望它在组件更新时重新呈现它.This works perfect as long as my 100 declaration is in the component that my code reads and writes with that ref in.然而，意识到我可能需要这个更高的树，我转向props .然而，当我将useRef声明移到父级并将ref作为props 传递时，代码似乎崩溃了，告诉我它是空的，无论初始化值是什么，而且它以前在子级中工作.据我所知，我不能通过裁判作为props ，所以我转向React.forwardRef.我try 了同样的事情，但没有解决方案，下面分享了一个类似的错误.如何将ref作为props 或组件树向下传递？
应用程序组件:
function App() {
const [itemsLeftCount, setItemsleftCount] = useState(0);
return (
<ToDos
itemsLeftCount={itemsLeftCount}
setItemsLeftCount={setItemsLeftCount}
></ToDos>
)
}
父零部件:
function ToDos(props) {
const prevItemsLeftCountRef = useRef(0);
return (
<ToDoBox
itemsLeftCount={props.itemsLeftCount}
setItemsLeftCount={props.setItemsLeftCount}
ref={prevItemsLeftCountRef}
></ToDoBox>
{
子组件:
const ToDoBox = React.forwardRef((props, ref) => {
useEffect(() => {
//LINE 25 Error points to right below comment
ref.prevItemsLeftCountRef.current = props.itemsLeftCount;
}, [props.itemsLeftCount]);
useEffect(() => {
//ON MOUNT
props.setItemsLeftCount(ref.prevItemsLeftCountRef.current + 1);
//ON UNMOUNT
return function removeToDoFromItemsLeft() {
//this needs to only run after setitemsleftcount state is for sure done updating
props.setItemsLeftCount(ref.prevItemsLeftCountRef.current - 1);
};
}, []);
})
我收到此错误: Uncaught TypeError: Cannot read properties of null (reading 'prevItemsLeftCountRef') at ToDoBox.js:25:1个
@穆斯塔法·瓦利德
function ToDos(props) {
const prevItemsLeftCountRef = useRef(0);
const setPrevItemsLeftCountRef = (val) => {
prevItemsLeftCountRef.current = val;
};
return (
<ToDoBox
itemsLeftCount={props.itemsLeftCount}
setItemsLeftCount={props.setItemsLeftCount}
prevItemsLeftCountRef={prevItemsLeftCountRef}
setPrevItemsLeftCountRef={setPrevItemsLeftCountRef}
></ToDoBox>
)
}
function ToDoBox(props) {
useEffect(() => {
//itemsLeftCount exists further up tree initialized at 0
props.setPrevItemsLeftCountRef(props.itemsLeftCount);
}, [props.itemsLeftCount]);
}
