标签: react-state

我知道有类似的问题，但我无法找出错误发生的原因。Div 显示，但随后应用程序崩溃（好像是长度问题）

代码类似于我找到的示例，比如这个沙箱

我究竟做错了什么？

这是组件：

import React, { useState, useEffect } from 'react'
/* import Button from '../Button' */
import { getPlanets } from '../../services/index'
import './Planetas.css'


const Planetas = () => {

    const [planetas, setPlanetas] = useState([]);

    useEffect(() => {
        const fetchPlanetas = async () => {
            const planetas = await getPlanets()
            setPlanetas({ planetas })
        };    
        fetchPlanetas()
    }, []);


    return (
      <div className="planetas">
      {
        planetas.map((planeta, key) => {
            return <div key={key}>{planeta.name}</div>
        })
      }
      </div>
    )
}

export default …

我正在尝试更新包含多个级别的状态对象。请参阅此示例https://codesandbox.io/s/oq9kp9vy5y。

问题是，render 方法中的值不会更新……只有第一个。我可以强制更新还是有更好的方法？

谢谢卡斯帕

我试图将两个变量从组件“游戏”发送到组件“应用程序”，但我不确定如何一次发送多个道具。

这是我所拥有的：

//App Component

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      score: 0,
    }

    this.changeScore = this.changeScore.bind(this)
  }

  changeScore(newScore) {
    this.setState(prevState => ({
      score: prevState.score + newScore
    }))
  }

  render() {
    return(
      <div>
        <Game onClick={this.changeScore}/>
        <Score score={this.state.score}/>
      </div>
    )
  }
}

//Game Componenet 

class Game extends Component {

    constructor(props) {
        super(props)
        this.state = {
            score: 0,
        }
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        console.log('Clicked')
        this.props.onClick(this.state.score)

    }

    render() {
        return(
            <div>
                <button onClick={this.handleClick}> Score Button </button>
            </div> …

好的，我已经知道一种方法来做到这一点。但是，我问这个以防我重新发明轮子，因为我对 React 非常陌生。我的印象是，如果父组件通过 props 将她的状态传递给子组件而不是更新父组件的状态，那么子组件将在需要时重新渲染。但情况似乎并非如此。我设置了这个例子，

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: props.number,
    };
  }

  updateNumber(n) {
    this.setState({number: n});
  }

  render() {
    return (<h1>{this.state.number}</h1>);
  }
}

class Parent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      number: -1,
    };
    this.child = React.createRef();
    setInterval(this.updateState.bind(this), 1000);
  }

  updateState() {
    console.log(this.state);
    this.setState({
      number: Math.floor((Math.random() * 10) + 1),
    });
    // this.child.current.updateNumber(this.state.number);
  }

  render() {
    return (
      <div>
        <Child ref={this.child} number={this.state.number}/>
      </div>
    );
  }
}

在这个例子中，除非我明确定义一个引用并使用它来调用子级的更新函数（注释部分），否则每次更新父级的状态时都不会重新渲染子级。所以是这样吗？如果他们的父母的状态作为道具传递给他们，你是否应该手动更新你的孩子的状态（heh）或者他们应该自动更新（并因此重新渲染）。

我已经尝试了我能想到的所有方法，但是display: none当为组件选择一个值时，我无法阻止 react-select 中的占位符消失（我假设更改为因为它不再在 HTML 中）。

我已经阅读了两篇有类似问题的帖子：https : //github.com/JedWatson/react-select/issues/2152 https://github.com/JedWatson/react-select/issues/2143

但没有发现任何成功

我在占位符元素上的样式是：

valueContainer: base => ({
        overflow: 'visible'
      }),
placeholder: (provided, state) => ({
        ...provided,
        position: "absolute",
        marginTop: '-30px',
        display: 
      state.isFocused || state.isSelected || state.selectProps.inputValue || state.value
      ? 'block'
      : 'block',
      }),

这是一个堆栈闪电战。最终目标是在中心开始占位符并将其向上移动到焦点和选择的位置。问题是，一旦选择了某些内容，占位符就会消失。 https://stackblitz.com/edit/react-egf4va

我是前端开发和学习 React 的新手。现在我正在尝试构建一个 hello-world 项目。

执行之后npx create-react-app myapp，我得到了一个初始的 React 项目，我只是在文件中编码App.js。

import React, {useState} from 'react';

var counter = 0;

function App() {
  const [counter2, setCount] = useState(0);
  const increment = () => {
    setCount(counter2 + 1);
  };
  
  return(
    <div>
      <button onClick= {increment}>Increment</button>
      <h1>{counter++}</h1> // 1, 3, 5, 7... WHY???
      <h1>{counter2}</h1>  // 0, 1, 2, 3...
    </div>
  );
}

export default App;

执行后npm start，我得到了我的索引页，它包含三个部分：一个按钮和两个数字。

令我惊讶的是，当我单击按钮时，counter2按预期增加，但counter增加了两倍。这意味着继续单击按钮会给我如下结果：

1 0, 3 1, …

我有一个数组，如：

"data": {
    "key1": {
        "key_val1": "data1",
        "key_val2": "data2",
        "key_val3": "data3",
        "key_val4": "data4",

    },
    "key2": {
        "key_val1": "data1",
        "key_val2": "data2",
        "key_val3": "data3",
        "key_val4": "data4",

    },
    "key3": {
        "key_val1": "data1",
        "key_val2": "data2",
        "key_val3": "data3",
        "key_val4": "data4",

    }
}

我想用这个数组迭代并填充我的表，但我收到错误this.state.data.map() is not a function。

这是我的反应组件：

import React, { Component } from "react";
import $ from "jquery";
import axios from "axios";

class DataComponent extends Component {
  state = {
    data: [],
    isLoading: true
  };
  componentDidMount() {
    this.getData();
  }

  getData() {
    var …

我的 React 应用程序在表单标签上有 20 多个字段。我的工作代码如下

function DriverForm() {
    const [formData1, setFormData1] = useState(1);
    const [formData2, setFormData2] = useState(2);
    const [formData3, setFormData3] = useState(3);
    const [formData4, setFormData4] = useState(4);
    const [formData5, setFormData5] = useState(5);

    const handleSubmit = (event) => {
        event.preventDefault();
    };

    return (
        <div className="wrapper">
            <form onSubmit={handleSubmit}>
                <input value={formData1} onChange={(e) => setFormData1(e.target.value)} />
                <input value={formData2} onChange={(e) => setFormData2(e.target.value)} />
                <input value={formData3} onChange={(e) => setFormData3(e.target.value)} />
                <input value={formData4} onChange={(e) => setFormData4(e.target.value)} />
                <input value={formData5} onChange={(e) => setFormData5(e.target.value)} />
                <button type="submit">Submit</button>
            </form> …

在我的 React 应用程序中，在页面加载时，我调用 API 并将该值存储在状态中。当我尝试从状态创建 JSX 元素时，我收到错误Cannot read properties of undefined (reading 'expire')。

const [domains, setDomains] = useState([]);
const [records, setRecords] = useState({});

useEffect(() => {
        axios.get('zones/domains').then((res) => {
            setDomains(res.data)
            axios.get('zones/records', {
                params: {
                    l_id: res.data[0].l_id
                }
            }).then((res) => {
                setRecords(res.data)
            });
        });
        
    }, [])


let table_str = <tr>
    <td>SOA</td>
    <td>{records.added.expire}</td>
    <td>{records.added.value1} {records.added.value2}</td>
</tr>

React / State / Arrays 的新手。

为什么会出现“不可迭代”

  const myVar = {
    '2022-11-22': { selected: true, textColor: 'blue', activeOpacity: 0}
  };
 
  const [myMarkedDates, setMarkedDates] = useState(myVar);
 
  const newVar = {
    '2022-12-17': {selected: true, textColor: 'red', activeOpacity: 0}
  };
  
  const newVars = [newVar, ...myMarkedDates];
 
  setMarkedDates(newVars);