Question

为什么在React中出现上述错误？ -如果我在Person.js中将useState用作'count2'，那么它工作得很好-但是可以肯定这应该工作吗？

我有两个文件：Persons.js，它呈现Person.js的列表。 “人”数组传入

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的函数，则不能在其中使用钩子，因为钩子 ONLY 仅用于函数组件（有关钩子规则的信息）。

>

Answer 2

尝试：

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

而且您的Person组件上不需要该键。

React-错误：比上一次渲染期间渲染了更多的挂钩

2 个答案: