Question

我有一个访存和一个显示.js文件。但是我试图弄清楚如何读取状态。当然，现在完成了，它是从另一个.js文件返回的。但是我想改用设置的状态。我该如何重构呢？

我想在DataLoader.js中使用stateURL道具

DataLoader.js

import React, { useState, useEffect } from 'react';
import useFetch from "./useFetch";

export default function DataLoader({stateURL}) {
  const data = useFetch("/api");

  // Should not be used
  console.log("data", data);
  const data2 = Object.keys(data).map(data => data);
  console.log("data2", data2);
  const data3 = data2.map(key => {
    console.log("inside data3", key );
    return data[key];
  });

  //This is empty
  console.log("state", stateURL);

  return (
    <div>
        <h1>Testing</h1>
      <ul>
      {Object.keys(data3).map(key => {
        return <li>{data3[key].href}</li>;
      })} 
      </ul>
    </div>
  );
}

useFetch.js

import { useState, useEffect } from "react";
export default function useFetch(url) {
  const [stateURL, setStateURL] = useState([]);
  console.log("url", url);
  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setStateURL(data._links));
  }, []);
  console.log("stateURL", stateURL);
  return stateURL;
}

Answer 1

那不可能。

只能从原始创建组件中引用钩子。

为什么只在显示文件中使用提取挂钩？

如果要将这两个组件分开放置：

要访问数据，必须以某种方式共享数据，以便其他组件可以访问。有几种方法可以做到：

通过回调将数据传递到父组件，然后将其传递到另一个子组件。
使用状态管理库，例如redux或mobx。
使用上下文api在组件之间共享数据，但这可能不是此类数据的最佳方法。

这取决于您的设置和您的需求。如果只有这两个组件需要该数据，则将其推入父级即可正常工作。

如果还有其他组件，可能需要这些数据，则可能要使用状态管理库。

希望这会有所帮助。编码愉快。

从显示组件获取状态

1 个答案: