ReactJS：类型数组的状态在重新渲染期间解构为元素

Question

我正在尝试做什么

我有一个包含 "profiles" 数组的主组件。对于每个配置文件，我有两个不同的条件组件（一次只显示一个）。这两个组件中的每一个都有一个按钮，应该在单击时切换组件。所以我已经将状态提升到主要组件，使用 'useState' 挂钩创建组件状态（这是一个数组，其中每个索引都是一个字符串，代表要为配置文件数组中的每个元素显示的子组件），我已经为这些点击创建了两个事件处理函数，并将它们作为渲染道具传递给它们的子组件。

它们从第一个子组件开始。

问题以及我是如何找到它的

当你按下按钮切换到另一个组件时，它起作用了。当您按下按钮返回时，它崩溃了。说 "TypeError: Cannot assign to read-only property '0' of string 'large'"。我在 useState 初始化之后和每个函数中的状态更改调用之后放置了一些 console.log(state) 。会发生什么（只有一个元素的测试列表）是

组件初始化时，状态显示为['normal']（原始状态，良好）
单击第一个组件的按钮时，['normal'] 变为 ['large']（按预期）
现在重新渲染组件时，状态变为 'large'（不再是数组）
单击第二个组件的按钮时，应用程序崩溃，因为它不再是数组，无法更改数组元素

主要成分

const Peers = props => {
    let dummyPeer = {
        _id: "9asdf98sj3942j4fs9ji",
        user: {
            name: "Test Peer",
            avatar: "//www.gravatar.com/avatar/cd56136f6d9abfdf4a0198dc9ce656c8?s=200&r=pg&d=mm"
        },
        bio: "Biography for Test Peer",
        year: "2022",
        courses: [
            "CISC124",
            "PSYC223",
            "PSYC236",
            "COMM200",
            "CISC251"
        ]
    }

    let profiles = [];
    profiles.push(dummyPeer);

    let initialState = [];
    profiles.forEach(profile => {
        initialState.push("normal");
    });

    let [viewState, setViewState] = useState(initialState);
    console.log(viewState);

    const openLargeView = (id) => {
        let changeIndex = profiles.map(profile => profile._id).indexOf(id);
        setViewState(state => state[changeIndex] = "large");
        console.log(viewState);
    }

    const closeLargeView = (id) => {
        let changeIndex = profiles.map(profile => profile._id).indexOf(id);
        setViewState(state => state[changeIndex] = "normal");
        console.log(viewState);
    }

    return (
        <Fragment>
            {profiles.map((profile, index) => (<Fragment key={profile._id} >
                {viewState[index] === "normal" ? (
                    <Peer openLargeView={openLargeView} profile={profile} />
                ) : (
                    <ViewPeer closeLargeView={closeLargeView} profile={profile} />
                )}
            </Fragment>))}
        </Fragment>
    )
}

子组件 1：

const Peer = ({ profile, openLargeView }) => {
    const { _id, user, bio, year, courses } = profile;
    const { avatar } = user;

    return (<Fragment>
        <div className="card-row">
            <div className="profile-header">
                <h1 className="peer-text row-title"> {user.name} </h1>
                <p className="peer-text peer-small"> {year} </p>
                <img className="avatar avatar-peer-small" src={avatar} alt='' />
            </div>
            <button onClick={() => openLargeView(_id)} className="btn-small"> More </button>
        </div>
     </Fragment>)
}

子组件 2：

const ViewPeer = ({ profile, closeLargeView }) => {
    const { _id, user, bio, year, courses } = profile;
    const { avatar } = user;

    let courseElements = courses.map((course, index) =>
    <li key={index} className="profile-text"> {course} </li>
    );

    return (
        <Fragment>
            <div className="card-md peer-card">
                <div className="profile-header">
                    <h1 className="peer-text"> {user.name} </h1>

                    <img className="avatar avatar-peer" src={avatar} alt='' />
                </div>

                <div className="profile-info">
                    <h2 className="profile-text"> {bio} </h2>
                    <h2 className="profile-text2"> Year: {year} </h2>
                    <ul className="course-list"> {courseElements} </ul>

                    <div className="profile-button-group">
                        <button onClick={() => closeLargeView(_id)} className="btn-small"> Close </button>
                        <button className="btn-small"> Send Buddy Request </button>
                    </div>
                </div>
            </div>
            </Fragment>
    )
}

预期和实际结果

我希望它在单击第一个组件的按钮时返回到原始组件，但状态变成数组到字符串并且应用程序崩溃。

Answer 1

这里的问题是 viewState 在 openLargeView() 和 closeLargeView() 中的更新方式。

调用这些函数时，对 setViewState 的调用将调用状态更改回调，该回调实际上将 viewState 的类型从数组更改为字符串：

/* 
Summary of problem with following line of code:
1. The statement: state[changeIndex] = "large" returns the string "large"
2. When executed, the statement returns the "large" string from the callback
3. The viewState therefore becomes a string with value "large"
*/
setViewState(state => state[changeIndex] = "large");

考虑将这些状态更新修改为如下内容：

setViewState(state => {
    /* 
    1. Shallow clone state into a new array with ... spread
    2. Assign value of "large" to the "changeIndex" in cloned array
    3. Return cloned array as new state for viewState
    */
    const arrayClone = [...state];
    arrayClone[changeIndex] = "large";
    return arrayClone;
});

这确保了 setViewState() 回调传回给您的组件的状态是数组类型，这正是您的组件所期望的。一个更完整的示例显示是否需要所有更改：

const Peers = props => {

    const profiles = [{
        _id: "9asdf98sj3942j4fs9ji",
        user: {
            name: "Test Peer",
            avatar: "//www.gravatar.com/avatar/" + 
                    "cd56136f6d9abfdf4a0198dc9ce656c8?s=200&r=pg&d=mm"
        },
        bio: "Biography for Test Peer",
        year: "2022",
        courses: [
            "CISC124",
            "PSYC223",
            "PSYC236",
            "COMM200",
            "CISC251"
        ]
    }]

    let [viewState, setViewState] = useState(["normal"]);

    const openLargeView = (id) => {
        let changeIndex = profiles.map(profile => profile._id).indexOf(id);
        setViewState(state => {
            const arrayClone = [...state];
            arrayClone[changeIndex] = "normal";
            return arrayClone;
        });
    }

    const closeLargeView = (id) => {
        let changeIndex = profiles.map(profile => profile._id).indexOf(id);
        setViewState(state => {
            const arrayClone = [...state];
            arrayClone[changeIndex] = "large";
            return arrayClone;
        });
    }

    return (
        <Fragment>
            {profiles.map((profile, index) => (<Fragment key={profile._id} >
                {viewState[index] === "normal" ? (
                    <Peer openLargeView={openLargeView} profile={profile} />
                ) : (
                    <ViewPeer closeLargeView={closeLargeView} profile={profile} />
                )}
            </Fragment>))}
        </Fragment>
    )
}

希望对您有所帮助！

ReactJS：类型数组的状态在重新渲染期间解构为元素

ReactJS: State of type array is deconstructing into element during re-render

javascript

reactjs

react-component

react-hooks

react-state