Javascript 如何在react state钩子上使用map函数

有人能解释一下，为什么我不能在React状态钩子上运行JavaScript映射函数

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数组不应为空

变化

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

到

改变

到

---

您遇到的问题是，您正在将sequenceNames的初始状态设置为null，因此您正在运行一个竞争条件，即第一次尝试在sequenceNames上运行循环时，它为null。您可以将sequenceNames初始化为空数组[]，但实现所要做的事情的最佳方法是使用挂钩

import React, { useMemo, useState } from 'react';
import { Sequence } from '.';

export interface DisplayNamesProps {
    id?: number;
}

export function DisplayNames(props: DisplayNamesProps) {
    const { id } = props;
    const [sequenceNames, setSequenceNames] = useState<Sequence[]>([]);

    // Use useEffect with the 2nd param, to guard against `fetch`
    // executing on each render. In this example I use `id` as
    // a var that should be unique for each `fetch` call.
    useEffect(() => {
        fetch(`/savedFiles/${id}`)
            .then(response => response.json())
            .then(data => setSequenceNames(data));
    }, [id]);

    // Create a memoized var `table` that updates when there
    // is a change to `sequenceNames`.
    const table = useMemo(() => {
        return sequenceNames.map(name => Sequence(name))
    }, [sequenceNames]);

    return <div>{table}</div>;
}

---

您遇到的问题是，您正在将sequenceNames的初始状态设置为null，因此您正在运行一个竞争条件，即第一次尝试在sequenceNames上运行循环时，它为null。您可以将sequenceNames初始化为空数组[]，但实现所要做的事情的最佳方法是使用挂钩

import React, { useMemo, useState } from 'react';
import { Sequence } from '.';

export interface DisplayNamesProps {
    id?: number;
}

export function DisplayNames(props: DisplayNamesProps) {
    const { id } = props;
    const [sequenceNames, setSequenceNames] = useState<Sequence[]>([]);

    // Use useEffect with the 2nd param, to guard against `fetch`
    // executing on each render. In this example I use `id` as
    // a var that should be unique for each `fetch` call.
    useEffect(() => {
        fetch(`/savedFiles/${id}`)
            .then(response => response.json())
            .then(data => setSequenceNames(data));
    }, [id]);

    // Create a memoized var `table` that updates when there
    // is a change to `sequenceNames`.
    const table = useMemo(() => {
        return sequenceNames.map(name => Sequence(name))
    }, [sequenceNames]);

    return <div>{table}</div>;
}

---

不客气。无论您使用哪种react版本，解决方案都将保持不变。欢迎使用。无论使用哪个版本，解决方案都保持不变