标签: react-props

我实际上正在开发我的第一个 React 应用程序。这是一个收藏应用程序。在此应用程序上，有一个管理仪表板，其中包含应用程序的所有项目，管理员用户可以删除或修改项目（就像传统的电子商务后台一样）。对于修改项目，管理员用户单击“修改项目”按钮，然后打开一个用于修改项目信息的模式。

我的问题是当用户打开模态时，模态工作正常，但我无法传递所选项目的信息（如品牌名称、参考、价格...）。我很抱歉在同一天再次提出问题，但我尝试了很多方法但没有结果。非常欢迎提供一点帮助。

先感谢您，

这是我的代码：

import React, { Component } from \'react\';\nimport { database } from \'../firebase/firebase\';\nimport * as firebase from \'firebase\';\nimport withAuthorization from \'./withAuthorization\';\nimport _ from \'lodash\';\nimport AuthUserContext from \'./AuthUserContext\';\nimport FileUploader from "react-firebase-file-uploader";\nimport Image from \'react-image-resizer\';\nimport{InstantSearch, SearchBox, Hits, Highlight, RefinementList} from "react-instantsearch/dom";\nimport Modal from \'react-responsive-modal\';\n\n\n\nfunction removeToCatalogue(hit) { \n  const item = hit.objectID;\n    firebase.database().ref(`catalogue/${item}`).remove();\n    console.log("Capsule correctement supprim\xc3\xa9e du catalogue")\n}\n\n\n\n\nconst Hit = ({hit, onEdit}) =>\n    <div className="item">\n       <img src={hit.avatarURL} width={150} height={150}></img>\n        <h1 className="marque">{hit.marque}</h1>\n        <h3 className="numero">{hit.numero}</h3>\n        <h4 …

我正在尝试在我的详细信息组件中使用我的主要组件中的一个函数，我用户反应导航导航到该函数，并且我想在我的主要组件中保存详细信息屏幕中的一些更改

//主.js

import React from 'react';
import {
    StyleSheet ,
     Text,
     View, 
     TextInput,
     ScrollView,
     TouchableOpacity,
     KeyboardAvoidingView,
     AsyncStorage
    } from 'react-native'
import Note from './Note'
import { createStackNavigator, createAppContainer } from "react-navigation";
import Details from './Details';


export default class Main extends React.Component {

  static navigationOptions = {
    title: 'To do list',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
  };

  constructor(props){
    super(props);
    this.state = {
      noteArray: [],
      noteText: ''
    };
  }
render() {

    let notes = this.state.noteArray.map((val,key) => {
      return <Note key={key} keyval={key} val={val} …

以下是下面的代码，现在我想在同一个组件中更改 name 的值？我如何实现这一目标？

render(){
return(
<div>
<p>{this.props.name}</p>
</div>
)
}

大家好，我刚刚学会了 react，遇到了以下问题：当我在 App.js 中更改 hideFormAdd 时，FormAdd.js 中的 statusForm 只获取第一个未修改的默认值。

//file App.js
<TaskForm open={this.state.hideFormAdd}></TaskForm>

//file FormAdd.js
constructor(props) {
      super(props);
      this.state = {
        statusForm: this.props.open
      }
    }

我的道具有问题。

在我的课堂上，如果我这样做：

<Input type="text" name="firstName" id="firstName" placeholder="First Name" value={this.props.user.firstName}/>

这是工作，我的名字出现。

但如果我尝试：

componentDidMount = () => {
    console.log("firstName : "+this.props.user.firstName)
 }

那返回我undefined，有人可以帮助我吗？

开始使用 React。我的子组件 WeatherOptionsView 中有两个下拉菜单。我试图根据从父组件 WeatherContainerView 传递的先前选定值的 prop 数组来设置它的默认值。我还想将其设置为状态，因为该值将在下拉列表的 onChange 上发生变化。

当我这样做时，用户界面崩溃了。当我打印 props 的值时，我看到 selectedCodes 为 null。我这哪里出错了？任何帮助将不胜感激。谢谢！

console.log(this.props.isFailed);        //false
console.log(this.props.selectedValues);   //null

WeatherOptionsContainer.js

class WeatherOptionsContainer extends React.Component {
  constructor(props) {
    super(props);

    this.state = { isFailed: true, isLoading: false, selectedValues: ['City1', 'City2']};
  }

  render() {
    return (
      <WeatherOptionsView
        isFailed={this.state.isFailed}
        isLoading={this.state.isLoading}
        selectedValues={this.state.selectedValues}
      />
    );
  }
}

WeatherOptionsView.js

    class WeatherOptionsView extends React.Component {
      constructor(props) {
        super(props);
        this.state = { reasonState: false, selectedValues: this.props.selectedValues };
      }

      render() {
        const cx = classNames.bind(styles);

        return (
          <ContentContainer fill> …

我不明白一件事，为什么给我一个错误“TypeError：无法读取未定义的属性‘道具’”？

import React from 'react';
import { withRouter } from 'react-router-dom';
import * as ROUTES from '../../../constants/routes';

function Summary({ reservationData }) {
    if (reservationData.participants !== "" && reservationData.city !== "" && reservationData.day !== "" && reservationData.hour !== "") {
        return (
            <div>Summary<br />
                Participants: {reservationData.participants} <br />
                City: {reservationData.city} <br />
                Day: {reservationData.day} <br />
                Hour: {reservationData.hour} <br />
                {console.log(reservationData)}
            </div>

        );
    } else {
        { this.props.history.push(ROUTES.RESERVATION) }
    }
}

它在 else 语句的最后一行给了我一个错误

} else {
    { this.props.history.push(ROUTES.RESERVATION) }
}

我想要做的是总结两个包含应用程序从数据库中获取的值的 React props

这是道具片段

const GPBBatting = (props) => (
  <tr>
    <td>{props.player.Player}</td>
    <td>{props.player.G_GS.substring(0, 1)}</td>
    <td>{props.player.AB}</td>
    <td>{props.player.R}</td>
    <td>{props.player.H}</td>
    <td>{props.player.H2}</td>
    <td>{props.player.H3}</td>
    <td>{props.player.HR}</td>
    <td>{props.player.RBI}</td>
    <td>{props.player.SB_ATT}</td>
    <td>{props.player.BB}</td>
    <td>{props.player.SO}</td>
    <td>{props.player.BA}</td>
    <td>{props.player.OBP}</td>
    <td>{props.player.SLG}</td>

    <<<<<<I want the sum of OBP + SLG values here>>>>>

    <td>{props.player.TB}</td>
    <td>{props.player.SH}</td>
    <td>{props.player.SF}</td>
  </tr>
);

在此链接中是完整代码：https : //www.paste.org/111710

我将状态挂钩作为道具传递给我的组件，并且我的“setCity”工作得很好，但是当我尝试实现 setFlag 时，我收到一条错误消息“Searchbar.jsx:15 Uncaught TypeError: setFlag is not a function”

那么为什么我可以设置city的值而不是flag呢？我将道具从“应用程序”传递到“页脚”，然后再传递到“搜索栏”。

function App(){
  const [city, setCity] = useState("");
  const [flag, setFlag] = useState("");
  return (
    <div className='container'>
      <Header className='header' />
      <Body className='body' city={city} flag={flag}/>
      <Footer className='footer' setCity={setCity} setFlag={setFlag}/>
    </div>
  );
}

function Footer({setCity}, {setFlag}){
    return(
        <div className='footer'>
            Footer
            <Searchbar className='searchbar' setCity={setCity} setFlag={setFlag}/>
        </div>
    )
}

function Searchbar({setCity}, {setFlag}){

    handleChange = (e) =>{
        e.preventDefault();
        console.log(e.target.value);
        setCity(e.target.value);
    }

    handleSubmit = (e) => {
        e.preventDefault();
        console.log("submitted");
        setFlag(false);
    }
    return(
        <div className='searchbar'>
            <form>
                <select …

我在将展开运算符道具传递给组件时遇到问题。它不是返回一个包含值的列表，而是返回一个空列表。

这就是我将 props 传递给组件的方式

const APIKey = "abc";
const url = "def";
const props = { APIKey, url}
return (
      <ProfileModal {...props} />
)

但是，它返回一个空列表。

const FunctionName = (anotherPropIhave, props) => {
      const { APIKey, url } = props;
}

我正在尝试在应用程序目录中编写一个 Next.js 13 时事通讯页面，该页面使用依赖于 useEffect 作为 props 的服务器端组件。useEffect 从 REST API 获取数据以获取将呈现页面内容的新闻通讯。我正在使用的代码如下。当我需要“使用客户端”进行交互时，我无法弄清楚如何配置服务器端组件以使其工作。如何确保服务器端组件在发送到客户端之前已渲染？

代码：

import Navbar from '@/components/navbar'
import Footer from '@/components/footer'
import Pagination from './pagination'
import IssueCards from './issueCards';
import { useState, useEffect } from 'react';
import axios from 'axios';


const Newsletters = () => {
    const [issues, setIssues] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [issuesPerPage, setIssuesPerPage] = useState(5);

    useEffect(() => {
        const fetchIssue = async () => {
            const res = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API}/newsletters`)
            setIssues(res.data)
        }
        fetchIssue()
    }, …

我对 React 和 js 总体来说是新手，我正在学习 React 速成课程，并在课程中的某个时刻陷入了这个错误。这是我收到的错误消息是针对 PreventDefault 方法的，我用该方法来阻止页面刷新。

这是 2 个文件问题

import { useState } from "react"

export function NewTodoForm({onSubmit}){
    const [newItem, setNewItem] = useState("")
  function handleSubmit(e) {

    e.preventDefualt()
    if (newItem === "") return
    onSubmit(newItem)
    
    setNewItem("")
  }
return (
    <form className="new-item-form" onSubmit={handleSubmit}>
        <div className="form-row">
          <label htmlFor="item"> New Item</label>
          <input value={newItem} onChange={e => setNewItem(e.target.value)} type="text" id="item"></input>
        </div>
        <button className="btn" >
          Add
        </button>
      </form>
)
}

import "./styles.css"
import { useState } from "react"
import { NewTodoForm } from "./NewTodoForm"

function …