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

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"));