映射存在于对象内部的数组仅在条件语句中给出时有效

Question

我正在使用 Reactjs。

我想渲染一个存在于对象内部的数组。

state = {

   obj: { 

           name: abhishek,

           age: 23,

           characterList: ['a','b','c','d']

        }

}

我发现为了呈现 characterList，我必须将其包装在条件语句中。

而且我无法弄清楚原因。

不正确：

render(){

return(

         <>

             {

                 this.state.obj.characterList.map((character, i) => {

                      return(

                          <h1>{character}</h1>

                      )

                 })

             }

         </>

      )

这会产生错误 - “无法读取未定义的属性‘map’”

但是如果在这样的条件语句中给出 -

正确的：

render(){

return(

         <>

             { this.state.obj.characterList ? 

               (

                   this.state.obj.characterList.map((character, i) => {

                        return(

                            <h1>{character}</h1>

                        )

                   })

               ) : null

             }

         </>

      )

原始代码：给出错误（无法读取未定义的属性“映射”）

export default (props) => {

  const [FAQs, setFAQs] = useState([]);

  useEffect(async () => {

    const res = await Axios.get("http://localhost:5000/FAQs/getFAQs");

    setFAQs(res.data);

    console.log(res.data);

  }, []);

  return (

    <React.Fragment>

      <div className="faqs-wapper">

        <div className="faqs-heading">

          <h1>Frequently asked questions</h1>

          <h2>{FAQs.category}</h2> //This works fine.

        </div>

        { 

            FAQs.FAQList.map((QA,i) => {

                return (

                    <div key={i}>

                        <p>{QA.question}</p>

                    </div>

                )

            })

        }

      </div>

    </React.Fragment>

  );

};

Answer 1

您正在将 FAQs 初始化为useState.&nbsp;在您的 api 请求完成后，您的setFAQs方法似乎设置FAQs为一个对象，并FAQList作为 FAQs 对象上的键。更改setFAQs(res.data)为setFAQs(res.data.FAQList)并将您的地图更改为FAQs.map从FAQs.FAQList.map您的原始错误正在发生，因为该组件在 api 请求完成之前呈现并且FAQs.FAQList未定义。您正在尝试在此处查找未定义值的属性：FAQs.FAQList.map这会引发类型错误。