小编Emi*_*ron的帖子

我有一个包含以下模式的记录数组:

apis = [{
  info: {
    title: 'some title"
  }
}]

我需要返回用户输入是记录标题的所有记录.

我尝试使用Lodash这样的东西,但"title"总是一个字母.

this.searchResults = this.apis.filter(function(item){
    return _.some(item.info.title, function (title) {
        return _.includes(title, query);
    });
});

我正在申请表决。单击投票按钮后，我想禁用该按钮。如何禁用按钮。

模板

  <v-btn
   v-for="choice in data.choices"
   @click="doVote(choice.id)"
   color="success"
   v-bind:key="choice.id">
   votes: {{ choice.votes }}
  </v-btn>

脚本

  data () {
    return {
      vote: null,
      questions: [],
    }
  },

  methods: {
    fetchData () {
      this.$request.questions.list().then(res => {
        this.questions = res.data.results
      })
    },

    // add votes
    doVote (vote) {
      if (!vote) {
        return
      }
      this.$request.questions.vote(vote).then(res => {
        this.fetchData()
      })
    },

  mounted () {
    this.fetchData()
  },

我有一个二维数组，其结构如下：

我想将值相对于它们的索引相加。（-10000 + 100 + 100 + -100）。然后将它们存储在一个单独的数组中，如下所示：

[[500], [-10100], [9000], [18000], [18000]]

我想我必须使用map和reduce来实现这一目标，但是我运气并不好。

这是我目前拥有的：

for (var i=1; i<totals.length; i++) {
    for (var z=0; z<totals[i].length; z++) {
        console.log(totals[i][z] = totals[i-1][z] + totals[i][z]);
    }
}

但是，这似乎输出以下内容：

如果有人可以将我推向正确的方向，那就太好了。

我有以下数据：

const huntersData = [
    {
        id: 1,
        name: 'A',
        image: '',
    },
    {
        id: 2,
        name: 'B',
        image: '',
    },
    {
        id: 3,
        name: 'C',
        image: '',
    },
    {
        id: 4,
        name: 'D',
        image: '',
    }
]

export default huntersData

以及以下组件：

import React from 'react'

export default function Hunters(props) {
    return (
        <div>
            {
                props.hunters.map(hunter => (
                    <div key="{hunter.id}" onClick={() => props.selectHunter(hunter)}>
                        <img src={hunter.image} alt={hunter.name} height="90" />
                        <p>{hunter.name}</p>
                    </div>
                ))
            }
        </div>
    )
}

并调用：

<Hunters
    hunters={this.state.hunters}
    selectedHunter={this.state.selectedHunter}
    selectHunter={this.selectHunter} …

我在理解为什么收到错误消息时遇到了一些麻烦：

类型错误：无法分配给对象“#”的只读属性“描述”

我知道原则是我不想在我的减速器中修改状态。相反，我想返回状态的新副本。

这是我的减速器：

action TOGGLE_CHECKBOX:
    {
        let copyOfItems = [...state.items]; // create a new array of items

        copyOfItems.forEach(i => i.description = "newDescription");

        // return a new copy of the state
        return {
            ...state,
            items: copyOfItems
        }
    }

这是我的 Reducer 测试：

it ('Test that each item description is set', () => {
    const state = {
        items: [
            { description: "d1" },
            { description: "d2" }
        ]
    }

    deepFreeze(state);

    expect(MyReducer(state, { type: TOGGLE_CHECKBOX })).toEqual({
        items: [
            { description: "newDescription" }, …

假设我有以下数组：

const list = [{}, {}, {}, {}, {}, {}, {}, {}]

使用lodash，我想将它们“分组”为三个，这样我就可以在react/js中对它们进行排序

// 映射分组对象

group =>
<div>
     // Now map the three elements by one.
     item => 
    <div>item.value</div>
</div>

这是我的尝试：

  const mediaList = _.groupBy(media, (element, index) => {
    return Math.floor(index/3)
  })

不起作用，因为所有项目仍然分组到一个数组中，并且该数组的名称是NaN。

我怎样才能做到这一点？

我正在做一项练习 React 编程的任务，这就是任务 -更改用户名

这是解释：

此应用程序应允许用户通过输入自定义值并单击按钮来更新其用户名。

Username 组件已完成，不应更改，但 App 组件缺少部分。完成 App 组件，以便 Username 组件在单击按钮时显示输入的文本。

App 组件应该使用 React.useRef Hook 将输入传递给 Username 组件的 input 元素和 Username 组件。

例如，如果用户输入新用户名“John Doe”并单击按钮，则 id 为 root 的 div 元素应如下所示：

<div><button>Change Username</button><input type="text"><h1>John Doe</h1></div>

这是给出的代码：

class Username extends React.Component {
  state = { value: "" };

  changeValue(value) {
    this.setState({ value });
  }

  render() {
    const { value } = this.state;
    return <h1>{value}</h1>;
  }
}

function App() {
  function clickHandler() {}

  return (
    <div>
      <button onClick={clickHandler}>Change Username</button> …

我有以下 React 组件：

<SweetAlert 
    show={this.props.message} 
    success 
    title={this.props.message}
    onConfirm={this.props.handleCloseAlert}>
</SweetAlert>

这是我收到的警报：

success但我希望在执行时动态选择道具，所以我尝试了以下方法：

 const alertType = () => {
    switch(this.props.type) {
        case ALERT_ERROR:
          return 'error'
        case ALERT_WARNING:
          return 'warning'
        case ALERT_DANGER:
          return 'danger'
        case ALERT_INFO:
          return 'info'
        case ALERT_SUCCESS:
          return 'success'
      }
    }

<SweetAlert 
    show={this.props.message} 
    {...alertType()}
    title={this.props.message}
    onConfirm={this.props.handleCloseAlert}>
</SweetAlert>

但我失去了它的警报类型：

我还没有找到向组件添加任意道具的方法。

我一直在阅读关于钩子和它们的一些好处，但似乎苹果和橘子之间有一些比较，在高层次上，钩子组件只是具有依赖注入的人造类。例如，类 setState 与钩子 setState。您无法真正比​​较两者，因为它们的行为不同。行为上的差异不是因为函数或类，而是因为 react 实现了这两个函数。来自 useState 和其他钩子的值只是由依赖容器解析的人造类属性，并在每次渲染后创建和销毁。似乎 React 是说在类上使用钩子组件，因为类混淆了人和机器，但本质上是使用类概念，但称它们为别的东西。好的和坏的代码独立于类和函数，取决于你将问题分解成小块的程度，因此使用钩子移动到功能组件似乎是横向移动。我真的很喜欢 useEffect 的概念，但是我想知道为什么它的行为不能移植到类中。我没有看到嵌套函数比类函数更干净。

假设currentSelected在 React 功能组件中有一个独立于UI 的状态。它存储当前选择的项目，并将在某个时间使用。

有两种方法可以在useRef hook组件外存储状态或模块范围。

useRef 钩子：

function Example() {
  const currentSelected = useRef()

  useEffect(() => {
    // access currentSelected state
  })

  function handleClick(item) {
    currentSelected.current = item
  }

  return (
      <ul>
        {items.map(item => <li onClick={() => handleClick(item)}>item.name</li>)}
      </ul>
  )
}

模块范围：

let currentSelected = null
function Example() {

  useEffect(() => {
    // access currentSelected state
  })

  function handleClick(item) {
    currentSelected = item
  }

  return (
      <ul>
        {items.map(item => <li onClick={() => handleClick(item)}>item.name</li>)}
      </ul>
  ) …