使用 React Hooks 的 API 调用答案

【问题标题】：API call using React Hooks使用 React Hooks 的 API 调用
【发布时间】：2020-07-13 18:40:57
【问题描述】：

我正在尝试使用反应挂钩获取 api。我能够从 api 获取数据并使用 useState 声明一些属性。现在我正在尝试将 api 中的属性设置为 useState 中的属性，就像在类组件中使用 setState 一样，但我不知道该怎么做。

上面是我在promise中为console.log创建的userData。

【问题讨论】：

useState 返回两件事，当前状态和可用于更新状态的函数。将const initialState = 更改为const [state, setState] =，然后在then(userData => { 函数中调用setState(userData)

【解决方案1】：

你需要做一些改变，首先是初始状态应该是一个数组

const [initialState, setInitialState] = useState([])

我会使用一个数组，因为响应是给你一个用户数组，在你的 then 语句中你有 console.log 你可以做

setInitialState(userData)

这将使用项目数组更新 initialState 值，如果您实际上打算只使用一个用户，只需从 userData 数组中选择一个。 setInitialState 将是您计划使用 initialState 值时需要使用的函数。

【讨论】：

如果我拥有的数据包含多个属性，这会起作用吗？我想要做的是为他们创建一个初始状态，然后使用来自 userData 的数据设置状态...名称电子邮件 ID 等...
根据第二张图片，您会收到一组用户项目，因此您应该像数组一样存储它，除非您想获取该数组中的一个用户，如果您是这种情况应该做一些类似 setInitialState(userData[0]) 的事情，例如，这将使用最初在你的数组上的用户。
所以如果你想从那个数组中找到一个特定的用户，你需要使用 find 方法，例如 setInitialState(userData.find(user => user.name === "John") || {})，这应该为您提供名为 John 的用户，依此类推。
是的，没错，你也可以对其他属性做同样的事情，或者如果不能，你可以只传递一个用户属性，这取决于你想如何处理。
例如，假设用户已经在 initialState 变量中，您可以将它传递给孩子，就像您建议的那样就可以了

【解决方案2】：

useState 返回一个array，其中第一个元素是数据，第二个元素是一个函数，您可以在以后调用它来更新状态。

从你的例子：

    // Receive the array from useState and use the "array destructuring"
    const [myState, setMyState] = useState({/*... you data */});

    // ...
    useEffect(() => {
        // fetch...
        // .then...
        .then(userData => {
            console.log(userData);
            setMyState(userData); // call the function here
        });
    // ...

这应该足以更新您的状态对象！

【讨论】：