Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/25.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
映射reactjs时出现一些语法错误_Reactjs_Redux - Fatal编程技术网

映射reactjs时出现一些语法错误

映射reactjs时出现一些语法错误,reactjs,redux,Reactjs,Redux,这是在渲染内部映射函数的正确方法吗 这是我的翻唱代码 render() { const { boardList } = { ...this.props.storyboardList }; const widgetListData = [...this.props.storyboardList.boardList].map(x => x.widgetList); widgetListData.map((widgetresult, i) => { return ( <div

这是在渲染内部映射函数的正确方法吗

这是我的翻唱代码

render() {
const { boardList } = { ...this.props.storyboardList };
const widgetListData = [...this.props.storyboardList.boardList].map(x => x.widgetList);
widgetListData.map((widgetresult, i) => {

return (

 <div className="clearfix">
   {this.state.isHidden ? (
  <div className="widget-list-wrapper clearfix">
    {this.state.widgetsList.length >= 0 ? (
   <div>
   <section className="section-break">
     {this.renderWidgets(widgetresult)}
    </div>
    </div>
    </section>
    )
    }
    }
render(){
const{boardList}={…this.props.storyboardList};
const widgetListData=[…this.props.storyboardList.boardList].map(x=>x.widgetList);
widgetListData.map((widgetresult,i)=>{
返回(
{this.state.ishiden(
{this.state.widgetsList.length>=0(
{this.renderWidgets(widgetresult)}
)
}
}

这是对自身的保存。您不需要将其转换为对象

let widgetresult = {}; 
for (let i = 0; i < widgetListData.length; i++) { 
    widgetresult = widgetListData[i]; 
} 
在你的渲染中

{widgets}

首先,由于状态仅用于渲染目的,因此不需要使用扩展语法进行克隆。如果要修改状态,则需要进行克隆

其次,您不会从render中返回任何内容

第三,您的语法不正确,因为您没有正确地关闭标记或从条件呈现返回null

render() {
     const { boardList } = this.props.storyboardList;
     const widgetListData = boardList.map(x => x.widgetList);
     // note the return statement here
     return (
       <div>
       {widgetListData.map((widgetresult, i) => {
          return (
               <div className="clearfix">
                   {this.state.isHidden ? (
                      <div className="widget-list-wrapper clearfix">
                          {this.state.widgetsList.length >= 0 ? (
                               <div>
                                  <section className="section-break">
                                     {this.renderWidgets(widgetresult)}
                                  </section>
                                </div>
                           ) : null}
                      </div>
                   ): null}
              </div>
          )
    })}
    </div>
   )
}
render(){
const{boardList}=this.props.storyboardList;
const widgetListData=boardList.map(x=>x.widgetList);
//注意这里的返回语句
返回(
{widgetListData.map((widgetresult,i)=>{
返回(
{this.state.ishiden(
{this.state.widgetsList.length>=0(
{this.renderWidgets(widgetresult)}
):null}
):null}
)
})}
)
}

最好向我们展示你如何存储数据的代码。展示关于如何创建新板的代码。@sarneeh..但这是一个巨大的代码3不同的组件谢谢你的回答,这里什么叫你小部件生成器?你能告诉我我指的是你的函数renderWidgets()从函数中删除映射并使用映射我在回答中向您显示的方式我没有更改,您能否更新该代码。我已更改,您能否检查,n说是否正确您需要映射到变量,然后显示该变量。我将更新我的回答。错误:有效的React元素(或null)必须返回。您可能返回了未定义的对象、数组或其他无效对象。@JMR,如果您使用的是react版本<16,则需要包装
widgetListData.map(
在一个div中,“react”:“15.6.1”,更新了答案很高兴能提供帮助:)
render() {
     const { boardList } = this.props.storyboardList;
     const widgetListData = boardList.map(x => x.widgetList);
     // note the return statement here
     return (
       <div>
       {widgetListData.map((widgetresult, i) => {
          return (
               <div className="clearfix">
                   {this.state.isHidden ? (
                      <div className="widget-list-wrapper clearfix">
                          {this.state.widgetsList.length >= 0 ? (
                               <div>
                                  <section className="section-break">
                                     {this.renderWidgets(widgetresult)}
                                  </section>
                                </div>
                           ) : null}
                      </div>
                   ): null}
              </div>
          )
    })}
    </div>
   )
}