Question

我在此链接中有此onClick事件：

<a href="#" onClick={() => show()}>{data.game.title}</a>

这样用于隐藏元素：

const [isShown, setIsShown] = React.useState(false);

const show = (title) => setIsShown(true);

现在我还想从此onClick传递一个值并将其保存为我的状态。

如何将值传递给函数？

我尝试这样做，但没有任何反应：

const [gameIdVal, setGameIdValue] = React.useState(false);

<a href="#" onClick={() => show(data.game.id)}>{data.game.title}</a>

const show = (gameId) => setIsShown(true), setGameIdValue(gameId);

但是我一直收到此错误：

Identifier 'setGameIdValue' has already been declared

但是我不明白这一点，因为它没有设置在任何地方。

有没有办法解决这个问题？

谢谢！

Answer 1

在这一行：

const show = (gameId) => setIsShown(true), setGameIdValue(gameId);

您没有使用花括号，并且JS解析器认为您想声明一个名为 setGameIdValue 的函数。正确的格式：

const show = (gameId) => {
  setIsShown(true);
  setGameIdValue(gameId);
}

Answer 2

您只需要添加如下花括号：

const cachedFetch = (url, options) => {
  // Use the URL as the cache key to sessionStorage
  let cacheKey = url

  // START new cache HIT code
  let cached = sessionStorage.getItem(cacheKey)
  if (cached !== null) {
    // it was in sessionStorage! Yay!
    let response = new Response(new Blob([cached]))
    return Promise.resolve(response)
  }
  // END new cache HIT code

  return fetch(url, options).then(response => {
    // let's only store in cache if the content-type is
    // JSON or something non-binary
    if (response.status === 200) {
      let ct = response.headers.get('Content-Type')
      if (ct && (ct.match(/application\/json/i) || ct.match(/text\//i))) {
        // There is a .json() instead of .text() but
        // we're going to store it in sessionStorage as
        // string anyway
       // If we don't clone the response, it will be
        // consumed by the time it's returned. This
        // way we're being un-intrusive.
        response.clone().text().then(content => {
          sessionStorage.setItem(cacheKey, content)
        })
      }
    }
    return response
  })
}

Answer 3

如果箭头函数的正文中只需要一行代码，则可以使用block body syntax。

block syntax要记住的重要事项是它使用curly braces {}来包装函数主体。

您可以这样做：

const [gameIdVal, setGameIdValue] = React.useState(false); const show = (gameId) => { setIsShown(true); setGameIdValue(gameId)}; }

使用onClick传递值并使用钩子更新两个状态值

3 个答案: