编辑

很抱歉显示错误的用例。通过中的所有输入Form都将通过传递this.props.children，并且它们可以位于组件树的任何深处，因此将handleChange直接传递给输入的方法根本行不通。

这是问题重现的代码片段。

class CustomSelect extends React.Component {
  items = [
    { id: 1, text: "Kappa 1" },
    { id: 2, text: "Kappa 2" },
    { id: 3, text: "Kappa 3" }
  ]
  
  state = {
    selected: null,
  }
  
  handleSelect = (item) => {
    this.setState({ selected: item })
  }
  
  render() {
    var { selected } = this.state
    return (
      <div className="custom-select">
        <input
          name={this.props.name}
          required
          style={{ display: "none" }} // or type="hidden", whatever
          value={selected
            ? …

我是新手，我正在尝试从 API 获取数据并将数据传递给子组件。我已将数据传递给父组件上的状态，但是，当我将其作为道具传递给子组件时，它会记录为一个空数组。我确定我忽略了一些简单的东西，但我不知道是什么，我的代码在下面

父组件

import React, {Component} from 'react';
import Child from '../src/child';
import './App.css';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
          properties: []
        }
    }

    getData = () => {
        fetch('url')
        .then(response => {
            return response.text()
        })
        .then(xml => {
            return new DOMParser().parseFromString(xml, "application/xml")
        })
        .then(data => {
            const propList = data.getElementsByTagName("propertyname");
            const latitude = data.getElementsByTagName("latitude");
            const longitude = data.getElementsByTagName("longitude");

            var allProps = [];

            for (let i=0; i<propList.length; i++) { 
                allProps.push({
                    name: propList[i].textContent,
                    lat: parseFloat(latitude[i].textContent), …

使用基本的表单/输入布局，很明显应该使用回调来处理从子组件到父组件的状态更改（由子组件启动），但是父组件如何要求子组件重新评估其状态并传达该信息回到父级？

这里的最终目标只是在提交表单按钮时触发子输入的验证。

给定的 [ts] 代码如下所示：

    const Login : React.FC<Props> = (props) => {\n        ...useStates omitted\n\n        const onSubmit = () : void => {\n          //trigger `verify()` in PasswordInput to get up-to-date `valid` state var\n\n \n        }\n        \n        return (\n            <PasswordInput\n              onValidChange={setValid} />\n            <Button\n              onPress={submit} />\n        )\n    }\n\n\n    const PasswordInput : React.FC<Props> = (props) => {\n        ...useStates omitted\n\n        const verify = () => {\n          //verify the password value from state\n\n          props.onValidChange(true)\n        }\n\n\n        return (<Input onBlur={verify}/>) \n    }\n

迄今为止采取的注释/路径： …

我正在使用 React 和 socket.io 开发一个聊天应用程序。后端是express/node。相关组件是： Room.js --> Chat.js --> Messages.js --> Message.js

从服务器接收到的消息数据以状态存储在 Room.js 中。然后它通过 Chat.js 传递到 Messages.js，并在其中映射到一系列 Message.js 组件。

当收到消息时，它们才会出现，但只有在我再次开始在表单中输入并触发 messageChangeHandler() 后才会出现。有什么想法为什么当收到新消息并将其添加到 Room.js 中的状态时消息不会重新呈现？我已经确认状态和道具正在更新它们应该在的所有地方——它们只是在 messageChangeHandler() 触发它自己的重新渲染之前不会出现/重新渲染。

这是组件。

Room.js

export default function Room(props) {
    const [messagesData, setMessagesData] = useState([])

    useEffect(() => {
        console.log('the use effect ')
        socket.on('broadcast', data => {
            console.log(messagesData)
            let previousData = messagesData
            previousData.push(data)
            // buildMessages(previousData)
            setMessagesData(previousData)
        })
    }, [socket])


    console.log('this is messagesData in queue.js', messagesData)

    return(
        // queue counter will go up here
        // <QueueDisplay />

        // …

我使用 Zustand 进行状态管理。目前，我有20片。而且切片的数量恐怕会增加三倍。最好的方法是什么，将一个非常大的状态拆分为切片或创建多个存储（如果需要，将每个存储拆分为切片）？对于一个大国来说，每种方法的利弊是什么？

我试图让 3 个选择下拉菜单根据选择自动更改。第一个下拉列表没有依赖项，第二个下拉列表依赖于第一个，第三个下拉列表依赖于第二个。

这是我的代码的一个非常简化的版本：

// record, onSave, planets, countries, cities passed as props

const [selectedPlanet, setSelectedPlanet] = useState(record.planet);
const [selectedCountry, setSelectedCountry] = useState(record.country);
const [selectedCity, setSelectedCity] = useState(record.city);

const filteredCountries = countries.filter(c => c.planet === selectedPlanet.id);
const filteredCities = cities.filter(c => c.country === selectedCountry.id);

return (
  <div>
    <select value={selectedPlanet.id} onChange={(e) => setSelectedPlanet(e.target.value)}>
      {planets.map(p => (
        <option key={p.id} value={p.id} name={p.name} />
      )}
    </select>

    <select value={selectedCountry.id} onChange={(e) => setSelectedCountry(e.target.value)}>
      {filteredCountries.map(c => (
        <option key={c.id} value={c.id} name={c.name} />
      )}
    </select>


    <select value={selectedCity.id} onChange={(e) …

我有 TextField 根据变量中一定数量的值选择 Material UI 组件。

{this.state.selectedNextHops.map((nextHop, index) => (
              <div>
                <TextField
                    select
                    className="vnfprofile-field"
                    InputProps={{ className: 'variable-value site-details-view-textfield' }}
                    InputLabelProps={{ shrink: true }}
                    SelectProps={{
                        MenuProps: {
                            className: 'vnf-designer-value',
                            getContentAnchorEl: null,
                            anchorOrigin: {
                                vertical: 'bottom',
                                horizontal: 'left',
                            }
                        },
                    }}
                    value = {this.state.selectedNextHops[index] || ''}
                    disabled={this.props.newPopoverPanelView === 'VIEW' ? true : false}
                    onChange={(e) => this.handleChange('nexthop', e)}
                  >
                    {this.state.remainingNextHops.length !== 0 ? this.state.remainingNextHops.map((option, i) => (
                        <MenuItem key ={i} value = {option || ''}>
                          {option}
                        </MenuItem>
                      )) :
                        <MenuItem value = {'No …

我面临以下问题：

在处理状态的React组件内部，有一个与socket.io的websocket连接。每当我收到一些事件时，都应该执行一些操作并更新组件的状态。例：

socket.on('some event', () => {
 this.aMethod() // this method calls setState()
})

问题是出现以下消息：

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

但是我没有componentWillUnmount在任何地方使用方法。并且该组件未卸载。

如果我更换aMethod与this.props.aMethod()和更新，将工作父组件的状态（存在amethod方法在这两个组件）。问题在于该组件非常庞大，因为它是一个容器，将所有状态移至父级，使用props会导致大量重写。

这使我想到了该应用程序的反应路线可能存在一些问题。

父组件具有以下路由（从概念上讲）：

 <Switch>

          <Route exact path={'/user/:id'} render={(props) => <User />} />
          <Route exact path={'/users'} render={(props) => <User />} />

  </Switch>

我之所以使用 …

我有一些 React 功能组件，我想分享它们的状态。在此示例中，两个切换按钮将有条件地显示/隐藏搜索栏和导航栏。

--解决方案，基于已接受的答案，位于底部--

我完全陌生useContext()，并且在控制台中不断遇到以下错误： Uncaught TypeError: setSearchbarToggle is not a function这适用于两个按钮。

下面我有一个过滤的示例代码。这只是我在一个文件中使用状态的示例。在现实生活中，我会在多个功能组件中重复使用状态。

这是我的header.js

import React, { useState, useContext } from "react"
import "./header.sass"
import { Context } from "./HeaderContext"

export const Header = () => {

  const headerContext = useContext(Context)
  const { navbarToggle, setNavbarToggle, searchbarToggle, setSearchbarToggle } = headerContext

  return (
    <React.Fragment>
      <div className={"sticky-top"}>

        <button onClick={ () => setNavbarToggle( !navbarToggle )}> Toggle Menu </button>
        <button onClick={ () => setSearchbarToggle( !searchbarToggle )}> Toggle Search </button>

        {navbarToggle …

我正在使用 React 功能组件，我只想更新状态的特定字段并像以前一样保留其他值。这是状态初始化 -

const[value, setValue] = React.useState({
     a: "5",
     b: "6"
});

我只想将“a”的值更新为其他值，比如说 7（同时保留“b”的相同值）。目前我正在这样做 -

setValue(currValue => ({
   ...currValue,
   a: "7"
}))

这是错误的吗？如果是，正确的做法是什么？