网络技术问题 | React.js 测验 |第一组 |问题2

问题描述

在 React.js 中，如何在一个函数式组件中设置 state？

解答

在函数式组件中设置 state 最常用的方式是使用 Hooks API 中的 useState 函数。

例如，我们可以使用以下代码创建一个计数器组件：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在上面的代码中，useState 函数返回一个包括一个当前状态值和一个更新状态值的数组，我们将其解构赋值给了 count 和 setCount 两个变量。然后我们可以在 render 函数中使用这些变量来展示当前的计数值以及更新这个值。

我们可以通过调用 setCount 函数来改变 count 的值，这个函数的参数是一个新的计数值。当这个函数被调用时，组件会重新渲染，展示计数器的新值。

这里需要注意，useState 函数只应该在函数式组件的顶层中调用，不能在循环、嵌套函数或事件处理函数中使用。

以上就是在 React.js 函数式组件中设置 state 的方法，希望对你有所帮助。