React - 错误：渲染的钩子比上一次渲染时更多

Question

为什么我在 React 中会出现上述错误？ - 如果我在 Person.js 中取出 'count2' 的 useState，它工作得很好 - 但这肯定会工作吗？

我有两个文件：呈现 Person.js 列表的 Persons.js。 'people' 数组传入

import React, { useEffect, useRef, useContext, useState } from 'react';
import Person from './Person/Person';

const Persons = (props) => {

    const [count, setCount] = useState(0);
    const [people, setPeople] = useState([]);

    useEffect(() => {
        setPeople(props.people);
    },
        []      // this to ensure a one-off!
    ); 

    let increaseMe = () => {
        setCount(count + 1);
    }

    let clickA = (event ) => {
        let newPeople = [...people];
        newPeople.push({ name: 'Tom', age: 16 })
        setPeople(newPeople);
    }

    let list = people.map(p => Person({name: p.name, 'age': p.age}));

    return (
        <React.Fragment>
            <div>Hello Persons - { props.message } </div>
            <button className='btnStyle' onClick={increaseMe}>IncreaseMe</button> { count }
            <button onClick={clickA}>click A</button>
            { list }
        </React.Fragment>
    )
}

export default Persons;

import React, { useState } from 'react';

const Person = props => {

    const [count2, setCount2] = useState(0);

    return (
        <div key={props.name}>
            { props.name } - { props.age} - { count2 }
        </div>
    )
}

export default Person;

Answer 1

错误来自这一行：

let list = people.map(p => Person({name: p.name, 'age': p.age}));

这不是你在 React 中渲染组件的方式，你所做的是调用一个名为 Person 的函数，你想调用 React.createElement 代替（渲染一个函数组件），这只是一个 JSX：

let list = people.map(p => <Person key={p.id} name={p.name} age={p.age} />);

当然，如果你想调用一个返回 JSX 的函数，你不能在其中使用钩子，因为钩子仅用于函数组件（阅读关于钩子的规则）。

Answer 2

试试这个：

let list = people.map(p => <Person key={p.name} name={p.name} age={p.age} );

而且您的 Person 组件上不需要密钥。