小编kar*_*017的帖子

为什么useEffect不会在window.location.pathname更改时运行？我loc只登录一次。

当路径名更改而没有任何其他库时，如何运行useEffect？

  useEffect(() => {
    const loc = window.location.pathname
    console.log({ loc })
  }, [window.location.pathname])

我看过类似的帖子，但找不到答案，就我而言，我正试图通过以下方式采取行动<App />：

  addExpense = (expense) => {
    console.log('Hello From AddExpenseForm');
  }

到/create路线在那里我渲染<AddExpenseForm />组件

<Link to={{
  pathname: '/create',
  state: { addExpense: this.addExpense }
}}> Create Expense</Link>

链接已呈现，但是当我单击它时，控制台出现错误：

Uncaught DOMException: Failed to execute 'pushState' on 'History': function (expense) {
      console.log('Hello From addExpense');
    } could not be cloned

为什么会这样，这里的解决方法是什么？

我更新的代码：

Index.js中的路由：

const Routes = () => {
  return (
      <BrowserRouter>
        <Switch>
          <Route path="/" exact component={App} />
          <Route path="/create" exact component={AddExpenseForm}/>
          <Route path="/expense/:expenseId" name="routename" component={ExpenseDetails} />
          <Route component={NotFound} …

我想从 UI 生成 pdf 并下载它。一直在寻找文档，但找不到如何实现 IeonClick={this.downloadPdf}

这是模块参考：https : //github.com/diegomura/react-pdf

它说： 保存在文件中

import React from 'react';
import ReactPDF from '@react-pdf/react-pdf';

ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

但这对我来说没有多大意义。

我有抽象：

function fetchDataFromAPI() {\n  const url = `https://api...`\n  return fetch(url).then(response => response.json())\n}\n

我想在我的其他代码中使用它，例如：

if(something){\n  const data = fetchDataFromAPI()\n  return data \n}\n

如果我的console.log数据得到解决，等待承诺

Promise\xc2\xa0{<pending>}\n  __proto__: Promise\n  [[PromiseStatus]]: "resolved"\n  [[PromiseValue]]: Object\n

我如何获取该对象data而不是 Promise？

我希望能够使用 fetch API 取消请求并使用new AbortController()不幸的是我在控制台中收到一个错误：AbortController is not defined

//  this.aborter = new XMLHttpRequest()  no error
    this.aborter = new AbortController() error

可能是什么原因？我只使用 vanilla JS，没有任何依赖项。

我正在尝试制作一个网格，在其中定义区域，但网格布局在屏幕上不起作用。我不确定如何调试它。在我看来，我已经正确地定义了一切。我缺少什么？

const GridLayout = styled.div`
  height: 100vh;
  display: grid;
  grid-template-areas:
    'nav nav nav'
    'aside main aside'
    'footer footer footer';
  grid-template-rows: 1fr 9fr 1fr;
  grid-template-columns: 1fr 6fr 1fr;
`;

const Nav = styled.nav`
  grid-area: nav;
`;
const Aside = styled.aside`
  grid-area: aside;
`;
const Main = styled.main`
  grid-area: main;
`;
const Footer = styled.footer`
  grid-area: footer;
`;

function App() {
  return (
    <>
      <GlobalStyle globalProps={globalProps} />
      <ThemeProvider theme={theme}>
        <GridLayout>
          <Nav>Nav Area</Nav>
          <Aside />
          <Main>Main area</Main>
          <Aside />
          <Footer>Footer area</Footer>
        </GridLayout>
      </ThemeProvider> …

下面是来自 MDN 的一个例子。有两个按钮。一个是发送请求，另一个是取消。

var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}

现在我的情况不同了。我有一个query参数，如果正在获取但尚未完成且query参数更改 - 如何发送新请求并自动取消前一个请求？

我的组件 useEffect 钩子中有这个函数链。我将响应/数据设置为我的组件状态，以便我可以在我的组件中呈现数据。

client
  .items()
  .type("client")
  .toObservable()
  .subscribe(response => {
    setState(response)
  })

我如何模拟这个函数并在组件在我的测试中呈现之前调用它？我正在使用测试库/反应。

回应是 {items: [{},...]}, somethingElse: {}

下面是一个例子：

const user = createSlice({
  name: 'user',
  initialState: { name: '', age: 20 },
  reducers: {
    setUserName: (state, action) => {
      state.name = action.payload // mutate the state all you want with immer
    }
  },
  // "map object API"
  extraReducers: {
    [counter.actions.increment]: (state, action) => {
      state.age += 1
    }
  }
})

我可以访问计数器状态吗？假设我只想在计数器为 30 时增加年龄。否则，当useEffect钩子中的计数发生变化时，我需要监听并调度一些处理年龄增加（？）的动作。

换句话说，根据当前全局状态使用 计算状态切片的最佳方法是redux-toolkit什么？

如何从单独的.js文件导出axios获取请求，以便可以通过导入ie在main.js中使用它：

import { getNewQuote }  from './api'

class App extends Component {

  constructor () {
    super();
    this.state = {
      quote: []
    }
    this.handleNewQuote = this.handleNewQuote.bind(this);
  }
  componentDidMount() {
    getNewQuote();
  }

  handleNewQuote() {
    getNewQuote();
  }
   ...

我的api.js看起来像这样：

export function getNewQuote(){
    axios.defaults.baseURL = 'https://andruxnet-random-famous-quotes.p.mashape.com';
    axios.defaults.headers.common['X-Mashape-Key'] = "MY-API-KEY";
    axios.get('/?cat=famous&count=1')
      .then(res => {
        this.setState({ quote: res.data })
      })
      .catch(error => {
        console.log(error)
      })
}

通过此设置，我在控制台中遇到错误：

TypeError：无法读取api.js：8处未定义的属性“ setState”

我认为问题在于：

axios getNewQuote导出或componentDidMount中的getNewQuote调用

有什么帮助吗？

我有这个按钮并使用recompose中的StateHandlers进行操作。目标只是将按钮状态从 active: false更改为 active: true。

const EnhancedButton = withStateHandlers(
  ({ initialState = false }) => ({
    active: initialState
  }),
  {
    onTrigger: ({ active }) => ({
      active: true
    })
  }
)(({ active, onTrigger, children, id }) => {
  console.log(active)
  return (
    <Button
      onClick={() => onTrigger()}
      toggle
      active={active}
      size="massive"
      style={styles.button}
      as={Link}
      to={`/${id}`}
    >
      {children}
    </Button>
  )
})