使用 Hooks 和 useState 访问数组答案

【问题标题】：Accessing array with Hooks and useState使用 Hooks 和 useState 访问数组
【发布时间】：2021-01-05 12:50:39
【问题描述】：

我有以下代码：

const [personsState, setPersonsState] = useState({
  person: [
    { name: 'Max', age: 28 },
    { name: 'Manu', age: 29 },
    { name: 'Stephanie', age: 26 }
  ],
  showPersons: false
});

使用下面的代码访问 person 数组是最佳做法吗？

persons = (
  <div>
    {personsState.person.map((person) => {
      return <Person name={person.name} age={person.age} />;
    })}
  </div>
);

【问题讨论】：

标签： arrays reactjs react-hooks jsx

【解决方案1】：

如果您使用 Hooks，React 建议您将不同类型的状态分离到不同的变量中。与类组件不同，您不应尝试将所有状态放入单个变量中。

来自their FAQ：

我们建议根据值一起变化的趋势将状态拆分为多个状态变量。

考虑使用persons（数组）和showPersons（布尔值）代替：

const [persons, setPersons] = useState([
    { name: 'Max', age: 28 },
    { name: 'Manu', age: 29 },
    { name: 'Stephanie', age: 26 }
  ]);
const [showPersons, setShowPersons] = useState(false);

然后通过映射persons 变量而不是personsState.prson 来生成JSX。

【讨论】：

【解决方案2】：

您的代码在我看来不错，只有一个与 React 文档的 Lists and Keys 部分相关的额外建议：

键帮助 React 识别哪些项目已更改、添加或删除。应该为数组内的元素提供键，以使元素具有稳定的身份。

为了消除警告，您需要将key添加到.map()中的每个迭代元素为：

<div>
    {personsState.person.map((person, index) => {
      return <Person key={index} name={person.name} age={person.age} />;
    })}
</div>

【讨论】：