Fatal编程技术网
  • asp.net-mvc/
  • Asp.net mvc React.js error“；this.state.product.response.map不是函数“；

Asp.net mvc React.js error“；this.state.product.response.map不是函数“；

asp.net-mvc database reactjs

Asp.net mvc React.js error“；this.state.product.response.map不是函数“；,asp.net-mvc,database,reactjs,Asp.net Mvc,Database,Reactjs,我是学习React.js和使用MVC框架和实体框架使用Visual Studio 2017构建CRUD应用程序的新手。我发现自己陷入了困境，多年来一直试图通过ajax调用控制器中的Index方法从MSSQL中的产品表中检索数据，然后在浏览器上进行渲染 我有一个产品表和一个产品类： public partial class Product { public long Id { get; set; } public string ProductName { get; set; }

我是学习React.js和使用MVC框架和实体框架使用Visual Studio 2017构建CRUD应用程序的新手。我发现自己陷入了困境，多年来一直试图通过ajax调用控制器中的Index方法从MSSQL中的产品表中检索数据，然后在浏览器上进行渲染

我有一个产品表和一个产品类：

public partial class Product
{


    public long Id { get; set; }
    public string ProductName { get; set; }
    public decimal Price { get; set; }

}
产品控制器代码为：

public class ProductsController : Controller

{
  private SalesModel db = new SalesModel();
    // GET: Product

    public ActionResult Index()
    {
        return View(db.Products.ToList());
    }
}
Product.jsx是：

class ProductsList extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        product: {
            Id: 1,
            ProductName: "Microwave",
            Price: 120.90,
            response: []
        }
    }
}

componentDidMount() {
    axios.get("/Products/Index").then(response => {
        //console.log(response.data);  
        this.setState({
            product: Object.assign({}, this.state.product, { response: response.data })
        });
    });
}

render() {

    return (
        <section>
            <h1>Products List</h1>
            <div>
                <table>
                    <thead><tr><th>Product Id</th><th>Product Name</th> 
      <th>Product Price</th></tr></thead>
                    <tbody>
                    {
                            this.state.product.response.map((item, key) => {
                                return <tr key={key}><td>{item.Id}</td><td> 
 {item.ProductName}</td><td>{item.Price}</td></tr>;
                        })
                    }
                    </tbody>
                </table>
            </div>


        </section>
    )
}

类产品列表扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
产品：{
Id:1，
产品名称：“微波”，
价格:120.90,，
答复：[]
}
}
}
componentDidMount（）{
get（“/Products/Index”）。然后（响应=>{
//console.log（response.data）；
这是我的国家({
product:Object.assign（{}，this.state.product，{response:response.data}）
});
});
}
render（）{
返回(
产品清单
产品名称
产品价格
{
this.state.product.response.map（（项，键）=>{
返回{item.Id}
{item.ProductName}{item.Price}；
})
}
)
}
}

ReactDOM.render（，document.getElementById（'myContainer'）；
视图为：

@using System.Web.Optimization
@model IEnumerable<MarsOnBoardTasks.ViewModels.Product>

@{
    ViewBag.Title = "Index";
}
<html>

<body>
<h2>Index</h2>

<div id="myContainer" class="container">

</div>
</body>
</html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel- 
core/5.8.23/browser.min.js"></script>
@* Jquery *@
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
@* React Library *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"> 
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react- 
dom.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

@* ReactJS components *@
@*<script src="/Scripts/Product.jsx"></script>*@
@Scripts.Render("~/Scripts/React/Product.jsx")

@使用System.Web.Optimization
@模型IEnumerable
@{
ViewBag.Title=“Index”；
}
指数
@*Jquery*@
@*反应库*@
@*ReactJS组件*@
@**@
@Scripts.Render（“~/Scripts/React/Product.jsx”）
确保您的响应是数组。 .maps仅适用于数组，不适用于对象 使用Object.entries（）。它将对象的键和值放入数组中

{"a":1} => [0]="a",[1]=1

Object.entries(this.state.product).map((product)=>{})
请阅读Reactjs中有关生命周期的更多信息

componentDidMount
在
render（）{
函数之后运行。 当使用
此.state.product.response.map时
状态未设置且为空

您正在对返回视图结果（HTML）的操作方法进行ajax调用（在react状态下使用）？为什么？那是什么注释掉了控制台日志，日志？嗨，Shyju，如果我没弄错的话，React需要使用来自控制器方法的ajax调用响应作为前端，在浏览器中进行渲染。我不知道如何通过MVC框架从数据库中检索产品。我是否遗漏了什么？嗨，azium，它记录：ObjectId:1价格：120.9产品名称：“微波”响应：阵列（0）长度：0Vynart，我知道。你能告诉我什么适用于对象，或者换句话说，你如何处理从数据库返回的对象吗？谢谢，你的代码中不再出现错误，原始问题已排序。我现在遇到另一个问题，那就是响应对象没有显示数据库对象。关于如何处理的建议o获取表记录将受到赞赏OK，那么我应该怎么做才能在Reactjs中填充响应对象。我需要一个合适的回复来解决这个问题。提前感谢。问题现在已经解决了。正如@Shyju正确指出的，我指的是错误的操作方法，它返回了我需要更新的视图我现在已经正确地指出了返回Json的方法，所有内容都已排序。感谢所有尝试这样做的人help@shyju您的回应最终导致了解决方案 
{"a":1} => [0]="a",[1]=1

Object.entries(this.state.product).map((product)=>{})