小编ade*_*rey的帖子

我正在使用带有rails 5.1.4的webpacker来使用Reactjs,Redux和react-router-dom.

我有一个导航栏组件,需要显示图像,但我无法访问assets/images文件夹中的图像,也无法访问文件夹中的图像public.

我在这 : app/javascript/src/components/navbar

我的路线定义main.jsx如下:

    <BrowserRouter>
      <div>
        <Alert error={error} />
        <Navbar user={user}/>
        <Switch>
          <Route path="/post/:id" component={PostsShow} />
          <Route path="/" component={PostsIndex} />
        </Switch>
      </div>
    </BrowserRouter>

这是我尝试过的:

<img src="logo.png" alt="Logo" />
<img src="assets/logo.png" alt="Logo" />
<img src="assets/images/logo.png" alt="Logo" />

那3次尝试成功了一次,但后来它给了我一个404 (Not Found)因为当路径改变时,它也使我的图像路径发生了变化.所以从根路径我得到了我的图像,因为/assets/images/logo.png确实存在,但是当我在/post/:id,重新加载页面或只是登陆这里给我以下404:

logo.png:1 GET http://localhost:3000/posts/assets/images/logo.png 404 (Not Found)

你能帮助我吗 ？还有更多关于处理那种或混合reactjs/rails应用程序中图像的方式？

谢谢

我在一个组件中，它有一个currentLineIndex由其父容器传递并来自 Redux 减速器的 prop 。

在同一个组件的函数中，我currentLineIndex使用动作创建者进行更新，然后我想滚动到新的currentLineIndex. 但它还没有更新，所以我滚动到同一行。

我试过使用async/await如你所见，但它不起作用。

在我的组件中：

const { currentLineIndex, setCurrentLineIndex } = props; // passed by the parent container 

const handlePlaybackEnd = async () => {
  const nextIndex = currentLineIndex + 1;
  // await don't wait until global state / component props gets updated
  await setCurrentLineIndex(nextLineIndex);
  // so when I scroll on next line, I scroll to the same line.
  scrollToCurrentLine(); 
};

const scrollToCurrentLine = () => …

我从 api 提取数据并映射到 JSON 数组以显示结果，如何使用引导网格使元素并排显示而不是像列表一样？

//应用程序.js

<div>
  <FileHeader/>
  {this.state.films.map(film=>(
    <div className="container">
      <div key={film.id} id='cardItem' className=''>
        <MovieCard film={film}/>
      </div>
    </div>               
  ))}
</div>

这是 MovieCard 组件

render() {
  var film = this.props.film;

  return(
    <div className='card' style={{width:'18rem'}}>
      <div className="card-body">
        <h5 className="card-title">{film.title}</h5>
        <h6 className='card-subtitle mb-2 text-muted'>{film.release_date}</h6>
        <p className='card-text'>{film.description}</p>
      </div>
    </div>
  )
}

如何使用网格元素并排显示卡片？

我是 create-react-app 的新手。

我刚刚用 redux 和 react-router-dom 做了一个新的设置，然后将它推送到 Scalingo，然后是 Heroku，它们最终都为开发构建服务。我的 redux-logger 已开启，React 开发工具警告说：

此页面使用 React 的开发版本。

我没有做任何定制部署，只是推到生产。

我究竟做错了什么 ？

Scalingo 部署日志：

<-- Start deployment of ***** -->
       Fetching source code
       Fetching deployment cache
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=true
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       engines.yarn (package.json):  unspecified (use default)

       Resolving node version 8.x...
       Downloading and installing node 8.15.0...
       Using default npm version: 6.4.1
       Resolving yarn version 1.x...
       Downloading and installing yarn …

我想将带有附加数据的图像从 React.js 发送到 Django 后端。当我使用 FormData() 创建表单数据时，它无法发送数组（因为它将其转换为字符串）。这是我的代码：

let formData = new FormData();
        formData.append('text', postForm.text);
        formData.append('image', postForm.image, postForm.image.name);
        formData.append('privacy', postForm.privacy);
        formData.append('custom_list', postForm.customList);

        props.createPost(formData);

当我使用这个时，我得到了这个错误：

{"custom_list":["Incorrect type. Expected pk value, received str."]}

因此，我尝试创建自己的对象以发送到后端，但它无法处理图像数据。代码是：

const formData = {
            text: postForm.text,
            image: postForm.image,
            privacy: postForm.privacy,
            custom_list: postForm.customList
        }

这给出了以下错误：

{"image":["The submitted data was not a file. Check the encoding type on the form."]}

他们有什么办法可以同时发送列表和图像吗？

我是create-react-app的新手。我只是使用进行了快速设置，redux并且使用react-router-dom可以很好地在计算机上构建它yarn build，但是当推到Scalingo或Heroku时，构建失败，并出现以下错误：

 ./src/index.jsx
       Error: Failed to load plugin import: Cannot find module 'eslint-plugin-import'
       Referenced from:
       at Array.forEach (<anonymous>)
       at Array.reduceRight (<anonymous>)

我没有做任何定制部署的工作，只是推送到生产环境。

这是完整的部署日志：

Enumerating objects: 74, done.
Counting objects: 100% (74/74), done.
Delta compression using up to 4 threads
Compressing objects: 100% (68/68), done.
Writing objects: 100% (74/74), 185.95 KiB | 4.77 MiB/s, done.
Total 74 (delta 20), reused 15 (delta 0)
 <-- Start deployment of xxx-app-staging -->
       Fetching source code
-----> Creating runtime …

我使用 pundit 来处理我的 API 策略，我有一个项目显示，在某些情况下可以禁止用户，而在其他情况下只是受到限制。我所说的受限是指现在被禁止，但如果他付费，他就可以访问它。因此，我需要我的 API 使用特定代码 ( 402 Payment Required) 进行响应，以便客户端可以邀请用户付款以解锁节目。

403这是我当前的代码，它仅在 pundit 返回 false 时做出响应。

为了保持干燥和干净，最好在哪里实现返回403OR 的条件？402

class Api::V1::ItemController < Api::V1::BaseController
  def show
    @item = Item.find(params[:id])
    authorize @item
  end
end

class ItemPolicy < ApplicationPolicy
  def show?
    return true if record.public?

    # 403 will be generated, that's ok.
    return false if !record.band.members.include?(user)

    # If that condition is false I want to generate a 402 error at the end, not a 403.
    user.premium?
  end
end …

尝试使用react-map-gl但无法获得最简单的 lib 示例。一旦我尝试渲染地图，我就会在控制台中收到这个奇怪的错误，我无法理解：

Uncaught ReferenceError: _typeof is not defined
    at mr (blob:http://localhos…6-19b5d5c80288:4993)
    at blob:http://localhos…6-19b5d5c80288:6740
    at new Fn (blob:http://localhos…6-19b5d5c80288:6757)
    at new Jn (blob:http://localhos…6-19b5d5c80288:7040)
    at blob:http://localhos…6-19b5d5c80288:8992
    at blob:http://localhos…-19b5d5c80288:14153

有时会变成这样：

Uncaught ReferenceError: _typeof is not defined
    at mr (0bcc60f9-25f2-4a56-8906-ebd57645a06c:4993)
    at 0bcc60f9-25f2-4a56-8906-ebd57645a06c:6740
    at new Fn (0bcc60f9-25f2-4a56-8906-ebd57645a06c:6757)
    at new Jn (0bcc60f9-25f2-4a56-8906-ebd57645a06c:7040)
    at 0bcc60f9-25f2-4a56-8906-ebd57645a06c:8992
    at 0bcc60f9-25f2-4a56-8906-ebd57645a06c:14153

带有 mapbox 徽标的地图框仅呈现。

我在 Rails 6 上使用这些软件包：

"dependencies": {
  "@babel/preset-react": "^7.0.0",
  "@rails/actioncable": "^6.0.0-alpha",
  "@rails/activestorage": "^6.0.0-alpha",
  "@rails/ujs": "^6.0.0-alpha",
  "@rails/webpacker": "^4.0.7",
  "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
  "prop-types": "^15.7.2",
  "react": "^16.9.0",
  "react-dom": "^16.9.0",
  "react-map-gl": …