时间戳

首页 > 解决方案 > React - 错误：渲染的钩子比上一次渲染时更多

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

问题描述

为什么我在 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;

标签： reactjs

解决方案

错误来自这一行：

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 的函数，你不能在其中使用钩子，因为钩子只适用于函数组件（请阅读钩子规则）。

推荐阅读