Question

我有2个组成部分。父组件调用一个api，设置状态并将此数据发送到子组件。如果子组件触发事件，则父组件再次进行api调用，并使用先前的数据设置新数据。

但是该状态未保留其先前状态。当我回到父组件时，将添加新数据。

例如：第一次userData具有10个对象数组。我将其发送给孩子。当我在child中触发事件时，父组件将进行api调用，并将发送另一个包含10个对象的数组。总计将是20条记录。（其设置正确并将其发送给孩子）。

对于第3次api调用，父级中的原始数组只有10条记录以及新的api调用数据（共20条）。现在应该是20 + 10 = 30条记录，但是只有20条记录。为什么会这样？

父组件：

const onBottomEventSeeAlluser = async () => {
    Pagination.offset = Pagination.offset + 1;
    await HomeAPI.newsDetail(Pagination.offset, Pagination.limit).then(
      userData=> {
        console.log(userData.data, loading);
        setUserData(userPData=>([...userPData, ...userData.data]));      
      }
    );
  };
render (
 <AllUser userDataNews={userData}  onBottomEvent={onBottomEventSeeAllUser} ></AllUser>
)

子组件：

function AllUser({ userDataNews, onBottomEvent }) {
  useEffect(() => {
    console.log(userDataNews);
    console.log(BottomScrollListener.defaultProps);
    window.addEventListener("scroll", onScrollCheck, true);
  }, []);
  const onScrollCheck = event => {
    event.target.scrollHeight - event.target.scrollTop ===
    event.target.clientHeight
      ? onBottomEvent()
      : "";
  };
}

Answer 1

useEffect不用于保存状态，您需要useState钩子

示例代码：

function AllUser({ userDataNews, onBottomEvent }) {
  const [userNews, setUserDataNews] = useSate(userDataNews)
  useEffect(() => {
    console.log(userNews);
    console.log(BottomScrollListener.defaultProps);
    window.addEventListener("scroll", onScrollCheck, true);
  }, []);
  const onScrollCheck = event => {
    event.target.scrollHeight - event.target.scrollTop ===
    event.target.clientHeight
      ? onBottomEvent()
      : "";
  };
  const update = async () => {
    const data = await someAPI()
    setUserDataNews(userDataNews.concat(data))
  }
}

在反应挂钩状态下未保持其先前状态

1 个答案: