标签: react-hooks

我在 this.state 中有一个对象数组，我正在尝试从对象数组中更新单个属性。

这是我的对象

 this.state = {
  persons: [
    { name: "name1", age: 1 },
    { name: "name2", age: 2 },
    { name: "name3", age: 3 }
  ],
  status: "Online"
};

我尝试更新人 [0].name

import React, { Component } from "react";     
class App extends Component {
      constructor() {
        super();
        this.state = {
          persons: [
            { name: "John", age: 24 },
            { name: "Ram", age: 44 },
            { name: "Keerthi", age: 23 }
          ],
          status: "Online"
        };
      }
      changeName() {
        console.log(this);
        this.setState({ …

这些在父组件中......

   const [setQuantity, quantity] = useState(1);

   const handleSetQuantity = e => {
      console.log(e.target.value);
      console.log("TEST");

      setQuantity(e.target.value);
    };

我将它传递给子组件，如下所示：

<SomeChildComponent
    setQuantity={e => handleSetQuantity(e)}
    quantity={quantity}
/>

在 - 的里面 ：

<select
    onChange={e => props.setQuantity(e)}
    value={props.quantity}
    >
    <option value={1}>1</option>
    <option value={2}>2</option>
    <option value={3}>3</option>
</select>

由于出现“TEST”日志，我可以从孩子那里访问该功能。但是它告诉我：

Uncaught TypeError: setQuantity is not a function

我究竟做错了什么？如果是这样，从子组件触发的操作更改父状态的正确方法是什么？

我想强制以大写形式输入表单。

我使用了一种onChange方法和 React Hooks，但它不起作用，我不知道为什么......这是非常基本的，但我是 React 初学者。

我在更高的组件上导入了我的 Redux 存储： props name -> "facture"

import React, { useState } from 'react'
import { Col, Row } from 'mdmrc/lib/components/grid'
import { Button } from 'mdmrc/lib/components/button'
import { Form } from 'mdmrc/lib/components/form'
import { Input } from 'mdmrc/lib/components/input'
import { useTranslation } from 'react-i18next'

/**
 * composant de mise à jour des données de la facture
 */
export const UpdateForm = ({ classes, onSubmit, facture }) => {
  // ajout de …

useRef 返回的引用对象中的当前值始终为 null。

我在这里重现了这个问题 https://codesandbox.io/s/runtime-field-hmusg

我想获得对组件的引用 <MyComponent/>

我正在处理一些代码，但遇到了这个错误。我之前没有在其他项目中看到它出现过，所以我不确定它为什么会出现在这里。我正在使用 useEffect 钩子，我想在用户从下拉列表中选择一个选项时更新它。发生的情况是，当用户选择一个选项时，我收到以下错误TypeError: Assignment to constant variable.。我知道这是说我正在尝试更新一个不可能发生的常量，但我不明白为什么。不幸的是，

我无法确定如何正确呈现我的代码，但接下来的两行是我遇到问题的代码行。然后是我正在处理的完整代码。

const [TitleId, setTitleId] = useState(0); const TitleSelect = event =>{ console.log(event.target.value); setTitleId=(32); };

import React, {useState,useEffect} from 'react';
// import '../app.css';

const Header = props=> {
const [TitleList, setTitleList] = useState([]);
const [TitleId, setTitleId] = useState(0);

useEffect(()=>{
    console.log('first start');
    setTitleList(
        props.data.map((title,index)=>({
            title: title.title,
            id: index
        }))
    )
},[])
const TitleSelect = event =>{
    console.log(event.target.value);
    setTitleId=(32);
};

let content = (
    <select
    onChange={TitleSelect}>
    {TitleList.map(title=>(
        <option key={title.id} value={title.id}>
                {title.title}
                </option>
    ))}

    </select>) …

在react-redux 的 hooks 文档中，我们被警告说useSelector“即使组件的 props 没有改变，也不会阻止组件由于其父级重新渲染而重新渲染”，不像connect

这对我来说是新闻。是否connect防止在正常子组件不会重新渲染的地方重新渲染？更具体地说，我问的是当父组件重新渲染而 store 和 props 保持不变时，以下三种场景的重新渲染行为的差异：

1. 子组件包含在connectHOC 中。
2. 行为同 1.，但注入状态被重构为useSelector.
3. 作为 2.，但是useSelector依赖于它的所有东西都被删除了。

我收到错误“React Hook React.useEffect has a missing dependency: 'openPosts'”，其中 openPosts 是 Hook 中的状态。

export const Posts = (props) => {

  const [openPosts, setOpenPosts] = React.useState([]); *openPosts is an array of numbers*

  React.useEffect(_ => {
    let filteredOpenPosts = openPosts.filter(num => num >= 1);
    setOpenPosts(filteredOpenPosts);
  }, [props.userId]);

我已经阅读过，但我不明白为什么我会收到这个错误。我可以忽略它吗？

我本质上希望 state 像上面那样过滤并改变，props.userId并认为这将是一种干净的方法。我还可以创建更多状态来跟踪任何更改，props.userId但如果上述方法可行，我更喜欢它。

我正在尝试过滤我的数据以显示我的减速器并在第一次渲染中工作。但是，当我尝试使用分页更改页面时出现此错误：

× 重新渲染过多。React 限制渲染次数以防止无限循环 dispatch(GetFilteredData());

当我检查控制台时，我得到了 的无限循环console.log(data2)，但我不知道为什么会这样。

这是我的派遣工作 PaisBody.js

import React, { useState, useEffect } from 'react';
import {useSelector,useDispatch} from 'react-redux';
import TablePagination from 'Layout/Table/TablePagination';
import {InsertPageCount,InsertData,GetFilteredData} from 'Redux/Actions/Pagination';
import GetApi from 'Url/index';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import allReducers from 'Redux/Reducers/Pagination';
import {TableFilter} from 'Layout/Table/TableFilter';



const PaisBody = (props) => {

  const dispatch = useDispatch();
  dispatch(InsertData(props.data));
  dispatch(InsertPageCount(props.data.length));

  dispatch(GetFilteredData());

  const CurrentPage = useSelector(state => state.CurrentPage.page);
  const data2 = useSelector(state => state.CurrentPage.filteredData);

  console.log(data2);



  return (
    <div> …

我正在尝试将id带有 useState的道具应用于我的 DrumPad 组件，从其父 App 组件传入。在我的 app.js 文件中，正如它当前设置的那样，我收到一个错误“'id' 被分配了一个值但从未使用过。” 假设我需要使用 useState 设置变量以将 id 传递给 DrumPad 组件，我需要更改什么才能正确应用它？

应用程序.js：

const sounds = [
  { id: 'snare', letter: 'Q', src: 'https://www.myinstants.com/media/sounds/snare.mp3' },
  { id: 'bass 1', letter: 'W', src: 'https://www.myinstants.com/media/sounds/bass-drum.mp3' },
  // etc. 
];

const App = () => {
  const id = useState(''); // (Don't have setId since it won't change)

  return (
    <div className="App">
      {sounds.map(sound => (
        <DrumPad
          id={sounds.id}
        />
      ))}
    </div>
  );
}

DrumPad.js：

const DrumPad = () …

我目前正在学习 React。

我可以在函数组件中使用“let”而不是“useState”吗？

const Func = () => {
  let fruit = "banana";

  const changeFruit = () => {
    fruit = "apple"
  };

  changeFruit();
}

const Func = () => {
  const [fruit, setFruit] = useState("banana");

  const changeFruit = () => {
    setFruit("apple");
  };

  changeFruit();
}