Question

有人可以解释为什么我不能在React状态挂钩上运行JavaScript map函数吗？

const [sequenceNames, setSequenceNames] = useState(null);

useEffect(() => {
  fetch('/savedFiles')
    .then(response => response.json())
    .then(data => setSequenceNames(data));
}, []);

const table = sequenceNames.map(name => Sequence(name));

这适用于for in循环，但我的linter禁止使用for in。

const table = [];

for (const name in sequenceNames) {
  table.push(Sequence(sequenceNames[name]));
}

当我使用.map时，出现以下错误。

TypeError: Cannot read property 'map' of null
    at main.a21158832f7ed8c55e25.bundle.js:1
    at Bi (main.a21158832f7ed8c55e25.bundle.js:1)
    at main.a21158832f7ed8c55e25.bundle.js:1
    at f (main.a21158832f7ed8c55e25.bundle.js:1)
    at d (main.a21158832f7ed8c55e25.bundle.js:1)
    at main.a21158832f7ed8c55e25.bundle.js:1

即使我的sequenceNames数组不应为null。

Answer 1

更改

    const table = sequenceNames.map(name => Sequence(name));

收件人

    const table = Array.isArray(sequenceNames) && sequenceNames.map(name => Sequence(name));

Answer 2

您遇到的问题是，您正在设置sequenceNames null的初始状态，因此您遇到了竞争状况，这是您第一次尝试在{{ 1}}是sequenceNames。您可以将null初始化为一个空数组sequenceNames，但是完成所需的最佳方法是拥抱钩子。

[]

如何在反应状态挂钩上使用地图功能

2 个答案: