Question

首先，我有数据，可以通过浏览器控制台查看，并且可以很方便地从api中获取。但是，我找不到显示的解决方案。缺少诸如webpack config，dev-package等之类的东西。

package.json

<code>
{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "private": false,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-dev": "webpack-dev-server --open --mode development",
    "build-prod": "webpack --mode production"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "babel-loader": "^8.0.2",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "lodash": "^4.17.11",
    "materialize-css": "^1.0.0",
    "react": "^16.5.1",
    "react-dom": "^16.5.1"
  }
}
</code>

webpack.conf。

<code>
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer : {
    headers: { 
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": "true",
      "Access-Control-Allow-Headers": "Content-Type, Authorization, x-id, Content-Length, X-Requested-With",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE" 
    }
  },
  module: {
    rules: [ 
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },

      {
        test: /\.js|jsx$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },

      { 
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
        use: {
          loader: 'url-loader?limit=10000&mimetype=application/font-woff'
        }
      },

      { 
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
        use:{
          loader: 'file-loader'
        } 
      }
    ]
  }
}
</code>

search.js

<code>
import React, { Component } from 'react';
import axios from 'axios';

class FirstApp extends Component {
  state = {
    posts: [ ]
  }
  componentDidMount(){
    axios.get('https://jsonplaceholder.typicode.com/posts').then(res => {
      console.log(res)
      this.setState({
        posts: res.data.slice(0,10)
      })
    })
  }
  render () {
    const { posts } = this.state;
    const { postList } = posts.length ? (
      posts.map(post => {
        return (
          <div key={post.id}>
            <div>
              <span>{post.title}</span>
              <p>{post.body}</p>
            </div>
          </div>
        )
      })
    ) : (
      <div>no element.</div>
    )
    return(
      <div>
        <div>
          <h4>elements</h4>
          <p>{postList}</p>
        </div>
      </div>
    )
  }
}

export default FirstApp;
</code>

/dist/index.html仅显示'h4'标签。我想念什么或什么意思？

Answer 1

更改此行：

const { postList } = posts.length ? (

对此：

const postList = posts.length ? (

您不是在这里破坏变量，而是分配一个变量。

无法根据webpack-react应用显示来自sample-api的数据

1 个答案: