如何刷新子元素？

Question

我目前正在功能组件中使用此代码：

  return (
    <div style={{ height: "700px", overflow: "auto" }}>
      <InfiniteScroll
        pageStart={0}
        loadMore={FetchUpdates}
        hasMore={hasMore}
        loader={
          <ReactLoading type='spin' color='#000000'  />
        }
        useWindow={false}
      >
        <div key={0}>
          {items.map((data) => (
            <Station data={data} func={props.func} />
          ))}
        </div>
      </InfiniteScroll>
    </div>

在调用FetchUpdates方法时工作正常。但是当我从外部刷新 items 元素时，没有任何反应。

setItems([]);

欢迎任何想法。

编辑： 我正在使用 UseCallback 从父元素中更新值。

  const UpdateItemsAsync = async () => {
    let items2 = await radioBrowser.Next();
    setItems([...items, ...items2]);
    if (items2.length < 50) {
      setHasMore(false);
    }
    else {
      setHasMore(true);
    }
  };

  const FetchUpdates = useCallback(UpdateItemsAsync, [items]);

并通过一个简单的调用来清除它：

  if (!radioBrowser.IsLastSearch(filter, fname)) {
    radioBrowser.configureSearch(filter, fname);
    setItems([]);
    setHasMore(true);
  }

编辑 2

完整功能：

function RadioStations(props) {
  const [items, setItems] = useState(new Array());
  const [hasMore, setHasMore] = useState(true);
  let { filter, fname } = useParams();
  let radioBrowser = new RadioBrowser();

  if (!radioBrowser.IsLastSearch(filter, fname)) {
    radioBrowser.configureSearch(filter, fname);
    setItems([]);
    setHasMore(true);
  }

  const UpdateItemsAsync = async () => {
    let items2 = await radioBrowser.Next();
    setItems([...items, ...items2]);
    if (items2.length < 50) {
      setHasMore(false);
    }
    else {
      setHasMore(true);
    }
  };

  const FetchUpdates = useCallback(UpdateItemsAsync, [items,radioBrowser]);

  return (
    <div style={{ height: "700px", overflow: "auto" }}>
      <InfiniteScroll
        pageStart={0}
        loadMore={FetchUpdates}
        hasMore={hasMore}
        loader={
          <ReactLoading type='spin' color='#000000'  />
        }
        useWindow={false}
      >
        <div key={0}>
          {items.map((data) => (
            <Station data={data} func={props.func} />
          ))}
        </div>
      </InfiniteScroll>
    </div>
  );
}

Answer 1

我可能需要完整的代码结构或工作示例来更好地回答这个问题，但可能更新您的 useCallback 可以解决这个问题。

通常我们在 useCallback、useEffect 或 useMemo 中使用的任何变量或函数都应添加为依赖项。

const FetchUpdates = useCallback(async() => {
  let items2 = await radioBrowser.Next();
  setItems([...items, ...items2]);
  if (items2.length < 50) {
    setHasMore(false);
  } else {
    setHasMore(true);
  }
}, [items, radioBrowser]);

Answer 2

我找到了解决我的问题的方法。这是我的解决方案：

function RadioStations(props) {
  const [items, setItems] = useState(new Array());
  const [hasMore, setHasMore] = useState(true);
 
  let { filter, fname } = useParams();
  let radioBrowser = new RadioBrowser();

  if (!radioBrowser.IsLastSearch(filter, fname)) {
    console.log('ok');
    radioBrowser.configureSearch(filter, fname);
    setItems([]);
    items.length = 0;
    items.init = 1;
    setHasMore(true);
  }

  const FetchUpdates = useCallback(async () => {
    let items2 = await radioBrowser.Next();
    setItems([...items, ...items2]);
    if (items2.length < 50) {
      setHasMore(false);
    }
    else { 
      setHasMore(true);
    }
  }, [items,radioBrowser]);

  return (
    <div style={{ height: "700px", overflow: "auto" }}>
       <InfiniteScroll
        pageStart={0}
        loadMore={FetchUpdates}
        hasMore={hasMore || items.init != undefined}
        loader={
          <ReactLoading type='spin' color='#000000'  />
        }
        useWindow={false}
      >
        <div key={0}>
          {items.map((data) => (
            <Station data={data} func={props.func} key={data.stationuuid}/>
          ))}
        </div>
      </InfiniteScroll>
    </div>
  );
}

如何刷新子元素？

How can I refresh a child element?

javascript

scroll

element

parent

reactjs