Question

我正在尝试了解反应并遇到一些问题。
当我尝试映射数组状态时，得到“无法读取null的属性'map'”。
在渲染之前如何确定状态已设置？

state = {
    array: []
};

componentDidMount() {
    this.setState({ array: JSON.parse(localStorage.getItem('session')) });
}

render() {
    const displayArray = this.state.array.map((item, index) => {
        return <p key={index}>{item}</p>
    });
    return (
        <div>{displayArray}</div>
    );
}

Answer 1

如果密钥__modti3在本地存储中没有存储的值，您将返回'session'。将其传递到null，它将被转换为JSON.parse，然后进行解析（再次提供"null"）。然后，您将其用作数组值。

要处理这种情况，请提供密钥不存在时的默认值：

null

这仍然假设如果存储了一个值，它将解析为一个数组。如果可能已存储了非数组值，则需要进行更全面的检查：

this.setState({ array: JSON.parse(localStorage.getItem('session')) || [] });
// ---------------------------------------------------------------^^^^^^

...或类似的

侧面说明：由于从本地存储中检索是同步的，因此无需等到let array; try { array = JSON.parse(localStorage.getItem('session')); } catch (e) { } this.setState({array: Array.isArray(array) ? array : []});就可以了。只需在最初创建状态时执行即可：

componentDidMount

（再次，如有必要，进行更全面的检查。）

如果它是异步的，则您要等待，但是由于它是同步的，因此没有必要，并且尽早执行可避免不必要的渲染。

注释2：有关为什么一般不建议使用索引作为键的原因，请参见the documentation on keys：

如果项目的顺序可能会改变，我们不建议使用索引作为键。这可能会对性能产生负面影响，并可能导致组件状态出现问题。请查看罗宾·波科尼（Robin Pokorny）的文章，以获取in-depth explanation on the negative impacts of using an index as a key。如果您选择不为列表项分配显式键，那么React将默认使用索引作为键。

我将如何在React中的渲染状态上映射？

1 个答案: