将状态应用于React中的嵌套对象。我如何称呼API并以使用效果显示

Question

因此，我一直在重新迭代我的代码并使用它几个小时，我需要帮助。我的目标是使用 useEffect 从星座 API 加载 API 调用。我遇到了这个错误，只有在从网站加载另一个页面并重新渲染主页后才能看到数据。我的目标是查看当我调用 useEffect() 时最初显示的数据。然而，这似乎不起作用。不确定我是否需要使用 setInitialState，或者操纵我通过上下文导出值的方式。

进一步推测， 我在某种程度上看到了我的代码中的问题所在，但我不知道如何使用 setInitialState 从 api 加载值。

          initialState.data.yesterday = data;

我是否将其保存到变量然后调用该变量的设置数据？

1.) 我尝试尽我所能地操纵状态。

2.) 页面在第一次运行时从不从 API 加载数据，仅在单击按钮后显示数据

3.) 代码似乎需要 setInitialDate 但找不到与 useEffect< 混合的合理解决方案/code> 以获得正确的数据。

谢谢你！！

我愿意听到针对我的问题的所有最佳解决方案。我什至不确定我是否走在正确的方向上。谢谢。

---

const [initialState, setInitialState] = useState({
    data: {
        yesterday: {},
        today: {},
        tomorrow: {},
    }
});

useEffect(() => {
    console.log("useEffect called");
    // eslint-disable-next-line react-hooks/exhaustive-deps
    async function getDayInfos() {
        try {
            const response = await axios.post('https://aztro.sameerkumar.website/?sign=aries&day=yesterday');
            const data = response.data
            initialState.data.yesterday = data;
        } catch (error) {
            console.error(error);
        }


        try {
            const response = await axios.post('https://aztro.sameerkumar.website/?sign=aries&day=today');
            initialState.data.today = response.data
        } catch (error) {
            console.error(error);
        }

        try {
            const response = await axios.post('https://aztro.sameerkumar.website/?sign=aries&day=tomorrow');
            initialState.data.tomorrow = response.data
        } catch (error) {
            console.error(error);
        }
    }

    getDayInfos()
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

return <AstroContext.Provider value={{initialState}}>
    {children}
</AstroContext.Provider>

}

Answer 1

React需要您调用setter（例如setInitialState）才能知道您已经更改了可能需要重新渲染的内容。

我知道当您的状态中有嵌套字段时，尝试进行对象操作是很诱人的，但考虑到您的字段基本上是一次性更改的，我们可以原子地执行此操作并缩短您的时间 -到第一个有意义的数据。

顺便说一句，我认为 initialState 对于变量名称来说可能不是一个好主意。我们将其称为 dayInfo 因为它就是这样的。我们还需要在加载数据时表示应用程序的状态 - 您将能够显示加载 UI，您可以摆脱空的 useEffect() code> dependency-array （以及 ESLint 禁用注释），它也确实有助于调试。

言归正传，这是一个工作版本：

// Document the shape of our state:
const initialState = {
  yesterday: {},
  today: {},
  tomorrow: {}
};

// Helper function that just gets a single day (to avoid repetition)
const fetchDay = async (day) => {
  try {
    const response = await axios.post(
      `https://aztro.sameerkumar.website/?sign=aries&day=${day}`
    );
    return response.data;
  } catch (error) {
    console.error(error);
  }
};

export default function App() {
  const [loadingState, setLoadingState] = useState("NOT_LOADED");
  const [dayInfo, setDayInfo] = useState(initialState);

  useEffect(() => {
    // Only go fetch the data if we haven't tried to yet
    if (loadingState === "NOT_LOADED") {
      setLoadingState("IN_PROGRESS");
      getDayInfos();
    }
  }, [loadingState]);

  async function getDayInfos() {
    // Fire off the three requests concurrently ...
    const yesterdayPromise = fetchDay("yesterday");
    const todayPromise = fetchDay("today");
    const tomorrowPromise = fetchDay("tomorrow");

    // ... but wait for them all to resolve here
    const [yesterday, today, tomorrow] = await Promise.all([
      yesterdayPromise,
      todayPromise,
      tomorrowPromise
    ]);

    setDayInfo({ yesterday, today, tomorrow });
    setLoadingState("LOADED");
  }

  ...
}

我们现在已经明确何时我们将去获取数据。

我们还更有效地使用 Promise，同时触发三个 Axios 获取，而不是逐一触发。最后，我们以原子方式设置 dayInfo 的状态，并指示我们已获取数据，以避免再次获取它 - 比空依赖项数组安全得多。

Answer 2

向@millhouse回答，我只补充说，在React或Redux中，保持数据尽可能贴切始终是一个好主意，因为您需要在数据上进行所有不变的操作以触发重新订阅者，并且如果您不够小心并且具有深嵌套对象，您可能会发现具有带有旧引用的嵌套对象的新对象，这些对象会导致各种微妙的行为。
如果您被迫使用深嵌套的数据结构，请尝试浸入其中，这是一个很棒的库，它使您可以直接与完全不可变的操作的结果直接突变对象深嵌套属性。