.map()未定义React- Axios和Express

zqdjd7g9 于 2023-01-20 发布在 iOS

关注(0)|答案(1)|浏览(142)

尝试在React中提交表单时不断出现此错误

Uncaught TypeError: queryList.map is not a function

这是密码：

const [query, setQuery] = useState();
    const [queryList, setQueryList] = useState([]);
    const [response, setResponse] = useState([]);
    const [responseList, setResponseList] = useState([]);

    const createQuery = () =>{
        setQueryList(
            {query}
        );
        alert(queryList)
        Axios.post('http://localhost:3001/createQuery', {
            query
        }).then((res)=>{
            setResponse(res)
            setResponseList(...responseList, {res})
        })
    }

    return(
        <div>
            {queryList && queryList.map((e) => {
                return(
                    <p className="ml-52 text-white text-xl">{e.query}</p>
                )
            })}
            <form>
                <textarea onChange={(event)=>{
                    setQuery(event.target.value)
                }} 
                type="text" name="name" autoComplete="off" placeholder="Ask a question" className = "caret-gray-200 bg-gray-800 shadow-md h-20 w-5/6 inset-x-0 bottom-6 absolute left-36 items-center snap-center text-xl p-6" />
                <button onClick={createQuery} type="submit" name="submit" className="text-white inset-x-0 bottom-6 absolute bg-transparent w-20 h-20 ml-auto mr-28 focus:outline-none focus:none">
                    <AiOutlineSend size="28" />
                </button>
            </form>
        </div>
    )

提交表单后，我需要Map查询
我知道我没有提到任何其他错误，但如果你看到他们，请让我知道!
顺便说一句，所有其他职位没有为我工作。
谢谢：）

axios

来源：https://stackoverflow.com/questions/75140008/map-react-undefined-axios-express

1条答案

按热度按时间

ncgqoxb01#

当你设置queryList的时候，你需要用数组括号把它设置成一个数组。同样的名字，我假设你想要一个包含所有查询的数组，所以你需要包含以前已经存储在queryList中的查询。

setQueryList([...queryList, { query }]);

这就是你的setter函数应该看起来的样子。除此之外，alert函数将不起作用，因为queryList没有及时更新，所以我建议你只在alert中使用query而不是queryList。另外，由于你使用表单的方式，页面将被重定向，这可以通过使用onSubmit事件和使用preventDefault（）函数来解决。

const [query, setQuery] = useState();
const [queryList, setQueryList] = useState([]);
const [response, setResponse] = useState();
const [responseList, setResponseList] = useState([]);

const createQuery = (event) => {
    event.preventDefault();
    setQueryList([...queryList, { query }]);
    alert(query);
    Axios.post('http://localhost:3001/createQuery', {
        query,
    }).then((res) => {
        setResponse(res);
        setResponseList(...responseList, { res });
    });
};

return (
    <div>
        {queryList &&
            queryList.map((e) => {
                return (
                    <p className='ml-52 text-white text-xl'>{e.query}</p>
                );
            })}
        <form onSubmit={createQuery}>
            <textarea
                onChange={(event) => {
                    setQuery(event.target.value);
                }}
                type='text'
                name='name'
                autoComplete='off'
                placeholder='Ask a question'
                className='caret-gray-200 bg-gray-800 shadow-md h-20 w-5/6 inset-x-0 bottom-6 absolute left-36 items-center snap-center text-xl p-6'
            />
            <button
                type='submit'
                name='submit'
                className='text-white inset-x-0 bottom-6 absolute bg-transparent w-20 h-20 ml-auto mr-28 focus:outline-none focus:none'
            />
        </form>
    </div>
);

我还没有测试过任何与axios，但这段代码应该工作。

赞(0）回复(0）举报 2023-01-20

我来回答

.map()未定义React- Axios和Express

1条答案

相关问题

热门标签

最新问答