Question

我有一个简单的列表，其中每个元素都有无线电输入。它们分别表现，这意味着每次选择都会改变特定元素的状态。

现在，当我尝试为

设置默认值 option2

  const [Selected, setSelected] = useState("option2");

在 console.log(Selected) 中，我没有返回 option2，而是有以下内容

{0: "o", 1: "p", 2: "t", 3: "option3", 4: "o"…}
0: "o"
1: "p"
2: "t"
3: "option3"
4: "o"
5: "n"
6: "2"

我如何设法返回正确的值，例如 option1 以便我可以拥有默认状态？

https://codesandbox.io/s/little-snowflake-j26b7?file=/src/App.js

import React, { useState } from "react";

export default () => {
  const initialList = [
    {
      id: "1",
      name: "John"
    },
    {
      id: "2",
      name: "Eric"
    },
    {
      id: "3",
      name: "Jonathan"
    }
  ];

  const handleChangeSelected = (e, id) => {
    setSelected({
      ...Selected,
      [id]: e.target.value
    });
  };
  const [list, setList] = useState(initialList);
  const [Selected, setSelected] = useState("option2");
  console.log(Selected);

  return (
    <div>
      <ul>
        <div>
          {list.map((item) => (
            <li key={item.id}>
              <div>
                <div className="users">{item.name}</div>
                <p />{" "}
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option1"
                  checked={Selected[item.id] === "option1"}
                  onChange={(e) => handleChangeSelected(e, item.id)}
                />
                <label for="huey">Option 1</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option2"
                  checked={Selected[item.id] === "option2"}
                  onChange={(e) => handleChangeSelected(e, item.id)}
                />
                <label for="dewey">Option 2</label>
              </div>
              <div>
                <input
                  type="radio"
                  id={item.id}
                  name={item.id}
                  value="option3"
                  checked={Selected[item.id] === "option3"}
                  onChange={(e) => handleChangeSelected(e, item.id)}
                />
                <label for="louie">Option 3</label>
              </div>
              <br />
            </li>
          ))}
        </div>
      </ul>
    </div>
  );
};

Answer 1

问题是您的初始状态是一个字符串，而您在 handleChangeSelected

中用作对象

只需将其编辑为 const [Selected, setSelected] = useState({});

另一个提示：

尽量不要对不是组件的变量使用大写的名称
您的列表不能是一个州
您的 id 可能是数组的索引

Answer 2

当您创建 useState 时，默认值是一个字符串，但是当您选择一个单选按钮时，您将其用作一个对象。

你的控制台日志结果奇怪的原因是这一步：

...Selected,

您想解构实际状态以保留之前的字段，但由于您的默认状态是一个字符串，因此该字符串被解构，当您解构一个字符串时，您会得到一个对象，每个字符一个字段。

为了修复它，您的状态必须保持一致（不是字符串然后是对象），您可以这样做：

const [selected, setSelected] = useState({
    1: "option1",
    2: "option3",
    3: "option2"
  });

现在，您的选择状态始终是一个包含每个用户一个字段的对象。

编辑：如果您想为所有用户使用相同的默认值，您可以创建一个函数来构建默认状态对象。在此示例中，您向函数提供用户列表和默认值：

function initialSelectedValue(users, defaultValue) {
    var initialState = {};
    for (var i = 1; i <= users.length; i++) {
      initialState[i] = defaultValue;
    }
    return initialState;
  }

并在声明 useState 时调用此函数：

const [selected, setSelected] = useState(initialSelectedValue(initialList, "option1"));

反应：返回字母而不是整个值

2 个答案: