我需要设置对象 reactjs 数组的默认值答案

【问题标题】：I need to set default value of array of object reactjs我需要设置对象 reactjs 数组的默认值
【发布时间】：2021-04-06 05:20:53
【问题描述】：

我从后端获取一个数组或一个对象，我的任务是设置第一个索引均值 [0] 以设置为默认值，但是当我设置时我变得未定义，你可以在代码中看到 userL 获取我的对象数组，但是当我打印 userle 它显示 label: undefined value: undefined 或当我打印 userL 我' m 得到我的对象列表数组

 const [userL, setUserL] = useState([]);
  useEffect(() => {
    axios
      .get(`${DJANGO_SERVER_ADDRESS}/auth/analyst/`)
      .then((res) => {
        setUserL(res.data);
      })
      .then(
        (result) => {
        },
        (error) => {
        }
      );
  }, []);
  console.log("ena1", userL);

const [userle, setUserle] = useState(
   { value: userL[0].username,
    label: userL[0].username,
  });
  console.log("nnnnnnnnnuuuu",userle)
console.log('nnnnnnnnnnn',userL[0])

const handleSelectChangeL = (object, action) => {
    setIndex(userL[object.id]);
    setUserlevel(null);
    console.log("select check", object.label, action.name, index);
    let name = action.name;
    let value = object.value;

    setFormData((prevFormData) => ({
      ...prevFormData,
      [name]: value,
    }));
  };

           <Col lg={2}>
              <label for="user">
                <header>User</header>
              </label>
              <Select
                options={userL.map((data, index) => ({
                  value: data.username,
                  label: data.username,
                  id: index,
                }))}
                styles={styles2}
                value={userle}
                name="user"
                onChange={handleSelectChangeL}
                placeholder="User"
                theme={(theme) => ({
                  ...theme,
                  colors: {
                    ...theme.colors,
                    text: "black",
                    primary25: "#d6fdf7",
                    primary: "#0bb7a7",
                    primary50: "#d6fdf7",
                  },
                })}
              ></Select>
            </Col>

【问题讨论】：

请尝试包含Minimal, Complete, and Reproducible Code Example，以便我们为您尝试做的事情提供更多背景信息。 userL 是什么？您何时何地尝试控制台记录这些值？
立即添加
我读对了吗，userL 与userle 在同一个组件中定义？如果是这样，那么 OFC userL[0] 将是未定义的，它还没有被填充。当userL 更新时，使用useEffect 钩子填充userle 状态，或者在设置userL 状态的同时设置它。

标签： javascript html reactjs

【解决方案1】：

如果你想从数据的第一个元素设置用户的状态，这样做。

const [userle, setUserle] = useState()
const [userL, setUserL] = useState([]);
  useEffect(() => {
    axios
      .get(`${DJANGO_SERVER_ADDRESS}/auth/analyst/`)
      .then((res) => {
        setUserL(res.data);
        setUserle(res.data[0]?.username);
      })
      .then(
        (result) => {
        },
        (error) => {
        }
      );
  }, []);

编辑

要同时更新下拉列表的用户状态 onChange，请在 handleSelectChangeL 函数下添加 setUserle()。

const handleSelectChangeL = (object, action) => {
    setIndex(userL[object.id]);
    setUserlevel(null);
    console.log("select check", object.label, action.name, index);
    let name = action.name;
    let value = object.value;
    
    setUserle(value); // Add this line   

    setFormData((prevFormData) => ({
      ...prevFormData,
      [name]: value,
    }));
  };

【讨论】：

好的，但我需要在我的下拉列表中设置这个默认值
@dev 好的，那么请提供handleSelectChangeL 函数。如果要更新下拉列表中userle 的值。
` const handleSelectChangeL = (object, action) => { setIndex(userL[object.id]);设置用户级别（空）； console.log("选择检查", object.label, action.name, index);让 name = action.name;让值 = 对象.值； setFormData((prevFormData) => ({ ...prevFormData, [name]: value, })); }; `
数据进入我的下拉列表只需要设置第一个值和标签默认

【解决方案2】：

如果你使用useState，你不能在同一个函数中得到更新状态的预期结果，但是如果想打印结果，你必须写useEffect和依赖userle state，或者你可以在function Commponent中的“return”语句上方控制台它

【讨论】：