reactjs 将setState与对象一起使用的方法

wj8zmpe1 于 2023-01-25 发布在 React

关注(0)|答案(3)|浏览(162)

import React, {useState} from "react";


const SideListItem = () => {

    const [showItem, setShowItem] = useState([
        {id: "List A", clicked: true},
        {id: "List B", clicked: true},
        {id: "List C", clicked: true},
    ]);
    

    const clickList = () => {
        const value = showItem[0].clicked;
        setShowItem(() => {
            const boolValue = value? false: value === true;
            return boolValue;
        });

        

        return console.log(value);
                
    };

我想做下面的下一个过程。
1.当我单击按钮时，state的值被更改。
=〉如果它是"真"，那么它就变成了"假"。如果是"假"，那么就是"真"。
但是，我的代码不工作...当我使用状态与数字，字符串，布尔，它的工作。
有没有一种方法可以将状态用于对象？
先谢谢你!
我试过这个密码。
const [已单击，已设置单击]=使用状态（假）;const单击列表=（）=〉设置单击（!单击）;
但是，我想使用状态和对象。

reactjs

来源：https://stackoverflow.com/questions/75219568/the-way-to-use-setstate-with-object

3条答案

按热度按时间

htrmnn0y1#

您可以这样做，并根据需要添加更多语句：

const clickList = () => {
    setShowItem(prevState => {
        return prevState.map(item => {
            if (item.id === "List A") {
                return {...item, clicked: !item.clicked};
            }
            return item;
        });
    });
};

但是最好是这样获得id参数：

const clickList = (id) => {
    setShowItem(prevState => {
        return prevState.map(item => {
            if (item.id === id) {
                return {...item, clicked: !item.clicked};
            }
            return item;
        });
    });
};

赞(0）回复(0）举报 2023-01-25

nzk0hqpo2#

你可以这样处理：

const clickList = () => {
    setShowItem(prevState => {prevState.map(item=>({...item,clicked:!item.clicked})));
  };

赞(0）回复(0）举报 2023-01-25

szqfcxe23#

你可以将数组的先前状态转换为被点击项的clicked属性被切换的状态。由于你没有提供任何html，我添加了一些示例html，将其替换为你自己的标记并使用onClick事件，如下所示：

const { useCallback, useState } = React;

const SideListItem = () => {
    const [showItem, setShowItem] = useState([
        {id: "List A", clicked: true},
        {id: "List B", clicked: true},
        {id: "List C", clicked: true},
    ]);
    
    const handleClick = useCallback(id => {
      setShowItem(p => p.map(item => {
        if (item.id === id) {
          return {
            ...item,
            clicked: !item.clicked
          }
        }
        return item;
      }));
    }, []);
    
    return showItem.map(item =>
      <div key={item.id} onClick={() => handleClick(item.id)}>
        Clicked: {item.clicked ? "yes" : "no"}
      </div>
    );
 }

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <SideListItem />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>

赞(0）回复(0）举报 2023-01-25

我来回答

reactjs 将setState与对象一起使用的方法

3条答案

相关问题

热门标签

最新问答