React useState 似乎不接受这里的默认值？

Question

我有一个图表组件，其中特定的行可以是 shown/hidden。为了跟踪哪些行处于活动状态，我将 activeKeys 数组保持在一个状态中。最初，我从一个接受数据数组的函数 getKeys 中获取键名。

当我这样做时：

    const defaultValue = getKeys(data)
    console.log('defaultValue from keys', defaultValue)
    const [activeKeys, setActiveKeys] = useState(defaultValue)
    console.log('activeKeys', activeKeys)

第一个控制台日志显示正确的键：

["createdCount", "confirmedCount", "hasFeedbackCount"]

第二个控制台日志显示 []

但是如果我这样做：

const defaultValue = ["createdCount", "confirmedCount","hasFeedbackCount"]
console.log('defaultValue', defaultValue)
const [activeKeys, setActiveKeys] = useState(defaultValue)
console.log('activeKeys', activeKeys)

第一个控制台日志显示相同的数组：

["createdCount", "confirmedCount", "hasFeedbackCount"]

和 activeKeys显示正确的数组：

["createdCount", "confirmedCount", "hasFeedbackCount"]

是useState坏了还是怎么的？ getKeys 是一个简单的函数，没有承诺或类似的东西。它看起来像这样：

const getKeys = (data: Props['data']): string[] => {
  const reduced = data.reduce((acc, datum) => [...acc, ...Object.keys(datum.lines)] as any, [])
  const setted = new Set(reduced)
  const arrayed = Array.from(setted)
  return arrayed
}

Props['data']的形状是：

  data: {
    date: string
    lines: Partial<Record<string, number>>
  }[]

Answer 1

您正在将 def 而不是 defaultValue 传递给 useState()；

const defaultValue = getKeys(data)
console.log('defaultValue from keys', defaultValue)
const [activeKeys, setActiveKeys] = useState(defaultValue)
console.log('activeKeys', activeKeys)

Answer 2

useState似乎没有问题。

根据React DOCs：

What do we pass to useState as an argument?

The only argument to the useState() Hook is the initial state. Unlike with classes, the state doesn’t have to be an object. We can keep a number or a string if that’s all we need. In our example, we just want a number for how many times the user clicked, so pass 0 as initial state for our variable. (If we wanted to store two different values in state, we would call useState() twice.)

因此，传递一个字符串数组作为 useState 的初始状态是完全正常的。即使它是函数的结果。（见下面的片段）。

我无法在 SO Snippet Editor 上重现您的 getKeys 函数，我建议您进一步检查一下。尽管这也可能是代码段生成器可能不支持某些 JS 功能的问题。

注意：这不是 useState 的问题。其他事情出了问题。尝试提交正在重现的问题的工作示例。

function App() {
  
  const someFunction = (x) => {
    return x;
  }
  
  const data = ['A','B','C'];
  
  const [state,setState] = React.useState(someFunction(data));
  
  console.log(state);
  
  return(
    <div>{state.toString()}</div>
  );
}

ReactDOM.render(<App/>,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Answer 3

我遇到了同样的问题。 React.useState.

没有错误是正确的

这里的问题是您的组件正在被挂载并计算空数组作为默认值。随后您的“默认值”更改为您预期的默认值，但 React.useState 已经具有空数组的默认值。

要解决此问题，您需要避免安装组件，直到获得所需的默认值。或者你可以做一些事情，比如使用 React.useEffect 钩子来寻找道具的变化，并调用 React.useState 输出的 setter （数组中的第二项）。

React useState 似乎不接受这里的默认值？

React useState does not seem to accept a default value here?

arrays

typescript

reactjs

react-hooks