Question

{ _id: 5d8b8,
  given_name: 'Abi',
  family_name: 'Abi',
  email: 'AAA@jwt.org',
  password:'password'
 }

我有此数据，我只想收到电子邮件。

 const url = 'http://localhost:9098/api/users'

    const [users, setUsers] = useState([])

    useEffect(() => {
        axios.get(url).then(json => setUsers(json.data))
    }, [])
    const getEmail = () => {
        return users.map(user => {
            return (

                <option> {user.email} </option>

            )
        })
    }

<select  onChange={handleAddMessage}
                        value={message.sender}
                        name="sender" id="sender"required>
                    <option>{getEmail()} </option>

                </select>

这就是我要尝试的方式。我需要一种简单的方法来将这些数据中的电子邮件提取到

Answer 1

我认为 value 属性必须位于 option 标签内。如我所见，您正在将 option 标签呈现在 option 标签，因为getEmail返回了 option 标签：

<option>{getEmail()} </option>

因此，我想出的办法是根据您的列表创建一种呈现选项的方法：

this.renderEmails = (  ) => {
 let optionList =  users.map(user => {
            return (

                <option value={ user.email }> {user.email} </option>
            )
        })
 return optionList
};

在您的渲染方法中：

<select  onChange={handleAddMessage}
         name="sender" id="sender"required>
       { this.renderEmails() }
</select>

Answer 2

获取数据时提取电子邮件。使用forEach遍历数据并将其存储到变量中，最后将其设置为用户状态

稍后您可以使用users.map()显示电子邮件ID

const url = 'http://localhost:9098/api/users';

const [users, setUsers] = useState([]);

useEffect(() => {
    axios.get(url).then(json => {
        let usersResponse = []; json.data.forEach((data) => {
            usersResponse.push(data.email);
        });
        setUsers(usersResponse)
    })
}, []);


    < select
           onChange = { handleAddMessage }
           value = { message.sender }
           name = "sender" id = "sender" required 
    >
    {
        users.map((email) => {
            <option>{email} </option>
        })
    }
    </select >

从URL获取特定数据

2 个答案: