Question

我有一个图表组件，其中可以显示/隐藏特定的线。为了跟踪哪些行处于活动状态，我将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

useState似乎没有问题。

根据React DOCs：

我们将传递给useState的参数是什么？

useState（）挂钩的唯一参数是初始状态。 与类不同，状态不必是对象。如果需要的话，我们可以保留一个数字或一个字符串。在我们的示例中，我们只需要一个数字来表示用户点击的次数，因此请将0传递为变量的初始状态。（如果要在状态中存储两个不同的值，则将调用useState（）两次。）

因此，将字符串数组作为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 2

我有同样的问题。没错，React.useState没有错误。

这里的问题是，您的组件正在安装并且将空数组计算为默认值。随后，“默认值”将更改为期望的默认值，但是React.useState已经具有空数组的默认值。

要解决此问题，您需要避免安装组件，直到所需的默认值可用为止。另外，您可能可以执行类似的操作，例如使用React.useEffect钩来查找道具的变化并调用React.useState输出的setter（数组中的第二项）。

Answer 3

您要将def而不是defaultValue传递给useState（）;

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

Answer 4

不知道发生了什么，但是我做了一些更改，现在可以了...

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

4 个答案: