javascript - 仅将自身数据的状态设置为reactjs上的 map

Question

我有一个对象的用户数组，我使用 map 来显示它们，每个用户都有一个选项按钮，即“编辑”和“删除”选项，每个选项都有一个 onlclick 函数，用于设置状态以显示另一个 View 所以代码本身就解释了

class App extends React.Component {
  state = {
        edit: false,
        remove: false
    }

    handleEdit = () => {
        this.setState({ edit: true })
    }

    handleRemove = () => {
        this.setState({ remove: true })
    }

    cancelEdit = () => {
        this.setState({ edit: false })
    }

    cancelRemove = () => {
        this.setState({ remove: false })
    }

    renderEditItem = () => {
        const {
            state: {
                edit,
                remove
            },
            cancelEdit,
            cancelRemove,
            handleEdit,
            handleRemove
        } = this

        if (edit) {
            return (
                <div>
                    <span>Edit view</span>
                    <br/>
                    <button onClick={cancelEdit}>Cancel</button>
                </div>
            )
        }

        if (remove) {
            return (
                <div>
                    <span>Remove view</span>
                    <br/>
                    <button onClick={cancelRemove}>Cancel</button>                  
                </div>
            )
        }

        return (
            <div>
                <button onClick={handleEdit}>Edit</button>
                <br/>
                <button onClick={handleRemove}>Remove</button>
            </div>
        )
    }


    renderUsers = () => {
        const {
            renderEditItem
        } = this

        const users = [
            {
                id: 1,
                name: 'User1'
            },
            {
                id: 2,
                name: 'User-2'
            },
            {
                id: 3,
                name: 'User-3'
            }
        ]

        return users.map((user) => {
            return (
                <ul key={user.id}>
                    <li>
                        <div>
                            <span ref='span'>{user.name}</span>
                            <br/>
                            {renderEditItem()}
                        </div>
                    </li>
                </ul>
            )
        })
    }

    render () {
        return (
            <div>
                {this.renderUsers()}
            </div>
        )
    }
}

React.render(
  <App />,
  document.getElementById('app')
);

JSfiddle:Here

问题是你怎么能看到，当我单击按钮设置编辑或删除选项的状态时，这将显示所有项目的 View ，并且应该只是被单击的 View ，我知道状态更改为 true 并且所有项目都相同，但我不知道如何仅为一个条目设置状态，有什么想法吗？

提前谢谢您。

Answer 1

您的问题是编辑/删除状态是单一的并且针对整个列表。列表中的每个项目在这里接收相同的状态:

if (edit) {
    return (
        <div>
            <span>Edit view</span>
            <br/>
            <button onClick={cancelEdit}>Cancel</button>
        </div>
    )
}

状态中的单个 edit 变量将应用于每个列表项。如果您想单独设置每个项目的编辑状态，则需要与该项目一起跟踪。

例如:

const users = [
    {
        id: 1,
        name: 'User1',
        edit: true
    }]

这样每个单独的项目就能够分别知道它所处的状态。 User1 项目将具有独立于其他用户的编辑模式。

然后你可以渲染如下内容:

return users.map((user) => {
    return (
        <ul key={user.id}>
            <li>
                <div>
                    <span ref='span'>{user.name}</span>
                    <br/>
                    {user.edit ? 'EDIT MODE' : 'NOT EDIT MODE'}
                </div>
            </li>
        </ul>
    )
})