Question

我无法更改某个名称的actif值。如果我单击标签“ Sport”，我希望“ Sport”中的“ actif”值更改为1，但是我不确定写什么正确的方法是什么，我已经尝试了很多。

const [activeTag, setActivetag] = useState([
        { name: "Music", value: 1, actif: 1 },
        { name: "Sport", value: 2, actif: 0 },
        { name: "VideoGames", value: 3, actif: 0 },
        { name: "Animals", value: 4, actif: 0 },
        { name: "Party", value: 5, actif: 0 },
        { name: "Arts", value: 6, actif: 0 },
        { name: "Movies", value: 7, actif: 0 },
        { name: "Travels", value: 8, actif: 0 },
        { name: "Cooking", value: 9, actif: 0 },
        { name: "Dance", value: 10, actif: 0 },
    ]);

谢谢！

Answer 1

您可以在Click事件上执行以下操作：

var newArr = [... activeTag]; 
newArr[index] = your_newvalue
setActiveTag(newArr);

更新后，我认为这要好得多

 function onClick() {
   setArr(arr.map((x) => (x.name === "Sport" ? { ...x, actif: 1 } : x)));
 }

CodeSandbox

Answer 2

我在codesandbox

中创建了一个示例

基本上，您想在setState和onChange处理程序中使用回调，例如reduce函数

  const onChange = useCallback(
    (name) => () => {
      setActivetag((oldActivetag) =>
        oldActivetag.reduce((acc, current) => {
          let tag = current;
          if (tag.name === name) {
            tag = {
              ...tag,
              actif: !tag.actif
            };
          }
          return [...acc, tag];
        }, [])
      );
    },
    []
  );

并在渲染中使用

<button onClick={onChange("Sport")}>Toggle Sport actif</button>

附带说明-可以争论useCallback的用法，特别是因为依赖项数组为空，但是为了提及它-在这里。

Answer 3

您可以将具有先前状态的回调传递给setter。更多here。

const UserDiv = () => {
    const [activeTag, setActiveTag] = useState(yourArray);

    const handleClick = event => 
        setActiveTag(prevState =>                 
            prevState.map(el => 
                (el.name != event.target.name) ?
                {...el, actif:0} : 
                {...el, actif: 1}
            )
        )
    
    return (
        yourArray.map(el => 
            <button 
                name={el.name}
                onClick={handleClick}
            >
                {el.value}
            </button>
        )
    )
}

使用react hook setState更改数组中的变量

3 个答案: