如何实施这个过程？ React.js

Question

我有两个参数（用户名和用户组）的用户

我有页面通过更改用户名和更新组来更新我的用户看起来像：

问题是，我无法突出显示组，我需要选择更新。

const AddUser = props =>{
 
  let editing = false;
  let initialUsername = "";
  const[initialGroups, setInitialGroups] = useState([])


  useEffect(()=>{
    retrieveGroups();
    
  },[])

  const retrieveGroups = () => {
    BackendService.getAllGroups()
    .then(response => {
      setInitialGroups(response.data);
    })
    .catch(e => {
      console.log(e);
    });
  }
  


  const[username, setUsername] = useState(initialUsername);
  const[groups, setGroups] = useState(initialGroups);
  const[submitted, setSubmitted] = useState(false);



  const onChangeUsername = e => {

    const username = e.target.value;
    setUsername(username);

  }

  const onChangeGroups = e => {
    console.log(e);
    setGroups(Array.from(e.currentTarget.selectedOptions, (v) => v.value));
  }
  const saveUser = () => {
    var data = {
      username: username,
      groups: groups,
      complited: false,
    }
    
    BackendService.editUser(
      props.location.state.currentUser.id,
      data)
      .then(response=>{
        setSubmitted(true);
        console.log(response.data)
      })
      .catch(e=>{
        console.log(e);
      })
   )
  .catch(e=>{
    console.log(e);
  });

    }
  }
  
return(
  <Container>
    {submitted ? (
      <div>
        <h4>
          User Edited Successfully
        </h4>
        <Link to={"/users/"}></Link>
        Back to Users
      </div>
    ):(
      <Form>
        <Form.Group className="mb-3">
          <Form.Label>
            "Edit" User
          </Form.Label>
          <Form.Control
          type="text"
          required
          value={username}
          placeholder="Enter username here"
          onChange={onChangeUsername}
          />
          <Form.Control
          as="select"
          multiple value={initialGroups}
          onChange={onChangeGroups}
          >
            {initialGroups.map(group => (
              <option key={group.id} value={group.id}>
                {group.name}
              </option>
            ))}
          </Form.Control>
        </Form.Group>
        <Button variant="info" onClick={saveUser}>
          "Edit" User
        </Button>
      </Form>
    )}

  </Container>
)
}
export default AddUser;

在本节中，我获取了数据库中的所有组（initialGroups）：

 const[initialGroups, setInitialGroups] = useState([])
    
    
      useEffect(()=>{
        retrieveGroups();
        
      },[])
    
      const retrieveGroups = () => {
        BackendService.getAllGroups()
        .then(response => {
          setInitialGroups(response.data);
        })
        .catch(e => {
          console.log(e);
        });
      }

在我将 InitialGroups 放入之后：

       <Form.Control
          as="select"
          multiple value={initialGroups}
          onChange={onChangeGroups}
          >
            {initialGroups.map(group => (
              <option key={group.id} value={group.id}>
                {group.name}
              </option>
            ))}
          </Form.Control>

并在 :

中处理

const onChangeGroups = e => {
    console.log(e);
    setGroups(Array.from(e.currentTarget.selectedOptions, (v) => v.value));
  }

我做错了什么？我无法突出显示我需要处理和更新用户的组

Answer 1

我想提出以下建议：

您不需要使用 'initialGroups' 作为状态变量。您已经有一个可以接收初始值的 'groups' 变量。

const [groups, setGroups] = useState([]);

您可以在检索数据后直接设置 'groups' 变量。

        BackendService.getAllGroups()
          .then(response => {
            setGroups(response.data);
        })

您应该将 'groups' 传递给 Form 组件上的 'value' 属性，而不是 'initialGroups'（然后映射到它）。

          <Form.Control
            as="select"
            multiple 
            value={groups}
            onChange={onChangeGroups}
          >
          {groups.map(group => (
            <option key={group.id} value={group.id}>
              {group.name}
            </option>
          ))}
          </Form.Control>

希望对您有所帮助！

如何实施这个过程？ React.js

How to implement this process ? React.js

javascript

arrays

frontend

reactjs