标签: rerender

我的问题是我试图在我的数据表中显示一个默认的输出文本列,并在按下命令按钮时用输入文本替换它.还没有找到解决方案.顺便提一句.

我有一个a4j:commandButton,我正在寻找reRender我的dataTable的这一部分

<a4j:commandButton reRender="yieldTable" action="#{yieldSearch.activateVisible()}"
id="modify" styleClass="editLargeIcon" value="Modify">
</a4j:commandButton>

<rich:dataTable id="yieldTable" value="#{yieldSearch.yfitem.yielditem}" var="_yield">
<rich:column>
<f:facet name="header">%-YLD</f:facet>
<h:outputText value="#{_yield.yfYield}" rendered="#{not yieldSearch.visible}">
</h:outputText>
<h:inputText rendered="#{yieldSearch.visible}" />
</rich:column>

我想激活这个方法(只显示相关代码)

@Name("yieldSearch")
@Scope(ScopeType.CONVERSATION)
public class YieldSearch implements Serializable{

private Boolean visible;

public void activateVisible(){
    this.setVisible(true);
    System.out.print(true);
}

    public void setVisible(Boolean visible) {
    this.visible = visible;
}

public Boolean getVisible() {
    return visible;
}

任何帮助非常感谢.

我有一个具有子组件的功能组件。子组件显示一些通过 props 从父组件传递给它的文本。当我更改父组件中的文本并将其向下传递时，子组件仍保留旧文本。

下面是父组件 MainPage 的最小可重现示例。

function MainPage(){
    let text = "This is the original text";
    setTimeout(function(){ text = "This is the new text" }, 3000);
    return(<DisplayText text={text} />);
}

下面是显示文本。

function DisplayText(props){
    return(<p>{props.text}</p>)
}

如何更新子组件，使其在 3 秒后显示“这是新文本”而不​​是“这是原始文本”？

提前致谢！

我试图将问题归结为一个尽可能简单的例子：

我们有一个子组件列表，每个子组件都称为NumChoice，每个子组件代表一个数字。NumChoice被包裹在React.memo. 在父组件中，我们有一个布尔数组choices，每个对应一个子组件NumChoice。首先， 的所有元素choices都是false。为了渲染子组件，我们遍历choices，并为每个选择生成相应的子组件NumChoice。我们chooseDivisibles在父组件中定义一个函数，使用useCallback它从每个子组件调用NumChoice。chooseDivisibles获取NumChoice调用它的人的索引并将其对应的元素更改choices为true。每个都是，否则，它的背景颜色是“白色”。NumChoice有一个“红色”的背景色，如果在其对应的元件choicestrue

完整代码可在：https : //codesandbox.io/s/react-rerender-l4e3c?fontsize=14&hidenavigation=1&theme=dark

包装NumChoiceinReact.memo和chooseDivisiblesin useCallback，我们希望只重新渲染NumChoice其相应元素发生choices变化的组件，但 React 会重新渲染它们。chooseDivisibles包含在 中useCallback，除了setChoices. 此外，NumChoice被包裹，React.memo并且只有在指定的道具改变时才应该重新渲染，但它们不会，并且改变choices不应该对重新渲染产生任何影响NumChoice。如果我们排除检查chooseDivisibles前一个和下一个 props的相等性，它会按预期工作，但我认为前一个和下一个的比较chooseDivisibles不应该影响重新渲染， …

我从反应原生开始。我从 giphy API 请求一个 gif，然后更新我的 giphyUrl 状态（状态已更改），但 gif 没有更改（组件未重新渲染）。

class QuoteList extends Component {
  state = { quotes: [],
            giphyUrl: 'https://media.giphy.com/media/nZQIwSpCXFweQ/giphy.gif'
          };

  componentWillMount() {
    console.log('Again?')
    axios.get('https://api.tronalddump.io/search/quote?query='+this.props.characterName)
      .then(response => this.setState({ quotes: response.data._embedded.quotes }))
    this.getGiphy()
  }

  getGiphy() {
    console.log('getgif')
    const GiphyUrl = "https://api.giphy.com/v1/gifs/search?api_key=tutu&limit=1&q=" + this.props.characterName.replace(" ", "+");
    console.log(GiphyUrl)
    axios.get(GiphyUrl)
      .then(response => {
                  console.log(response)
                  console.log(response.data.data[0].url)

                  this.setState({ giphyUrl: response.data.data[0].url })
                  console.log(this.state)
                })

  }

  renderQuotes() {
    return this.state.quotes.map(
      quote => <QuoteDetail key={quote.quote_id} quote={quote}/>
    );
  }
  render() {
    return (
      <ScrollView>
      <Image
        source={{uri: this.state.giphyUrl}}
        style={styles.gifStyle}
      /> …

我是钩子的新手。所以这可能很容易，但我不知道如何解决：

我有一个这样的函数，它需要两个数组columns和data. 并且这些数据应该被记住，否则它不起作用。（由 react-table 人员推荐）

function ReactTable(props) {

    const columns = React.useMemo(() => props.columns, [])

    const data = React.useMemo(() => props.data, [])

    return <Table columns={columns} data={data} />
}

这工作正常，但是当道具发生变化时（比如从数据数组中添加或删除一个项目），React.useMemo 不会将更新的数据发送到 Table 组件。我该如何解决这个问题:(

我对 React 不太有经验，但我有一个非常简单的设置。

export default function App() {
  const [title, setTitle] = useState("still-empty");

  const myFunction = title => {
    setTitle(title);
  };

  return (
    <div className="App">
      <ComponentA myFunction={myFunction} />
      <br />
      <br />
      <ComponentB title={title} />
    </div>
  );
}



const ComponentA = ({ myFunction }) => {
  console.log("Rendering Component A");

  return (
    <div onClick={() => myFunction(Math.random() * 1000)}> Component A </div>
  );
};

export default ComponentA;


const ComponentB = ({ title }) => {
  return <div> Title : {title}</div>;
};

export …

我目前将用户名存储在 redux 存储中，并在用户登录后将其显示在顶部栏中。（如屏幕截图所示）。但是，当 redux 状态更新时，它不会自动重新渲染。我仍然需要在顶部栏中执行一些操作，然后用户名就会出现。否则，它不会出现。所以问题是，如何强制从我的登录组件重新渲染顶栏组件。还有一个问题：刷新页面时用户名会消失。那么有没有什么选项可以用 redux 状态来保存数据呢？或者说这是不可能的。

const Login = () => {
  ...
  const handleLogin = async googleData => {
    ...
    //store user name value als application state into redux store
    store.dispatch(nameActionCreator(googleData.profileObj.name));
    ...
  }
}

const TopBar = () => {
  ...
  return(
    ...
    <h5>store.getState().userNameRecuder.name</h5>
    ...
  )
}

登录前

登录后

如何防止 React 中子组件的重新渲染？每次在父级更新 useState 中保存的 ID 时，子级都会重新渲染并失去选择。

以下是一些设置示例代码：

父组件：

import React, { useState } from "react";
import ChildComponent from "./ChildComponent";

function ParentComponent() {
  const [selectedProjectId, setSelectedProjectId] = useState("");

  const handleProjectIdChange = (projectId) => {
    setSelectedProjectId(projectId); //<--- this rerenders the ChildComponent which is NOT wanted
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent
        selectedProjectId={selectedProjectId}
        onProjectIdChange={handleProjectIdChange}
      />
      <p>Selected project ID: {selectedProjectId}</p>
    </div>
  );
}

export default ParentComponent;

子组件：

import React, { useState } from "react";

function ChildComponent({ selectedProjectId, onProjectIdChange }) {
  const [projectOptions, …

清单的基本代码示例：

class List extends React.Component {
    render() {
        const listComponent = this.props.numbers.map((number) =>
            <Item key={ number.toString() } value={ number } />,
        );

        return (
            <div>
                <button onClick={ () => this.setState({ test: 1 })}>Re-render list</button>
                { listComponent }
            </div>
        );
    }
}

这里是项目：

class Item extends React.Component {
    render() {
        return (
            <div>{ this.props.value + ', rendered time:' + new Date().getTime() }</div>
        );
    }
}

当我单击按钮时，状态会更新，因此List组件会重新呈现。

但是，如果我的理解是正确的，则由于关键项没有更改，因此不应重新渲染这些项。但是自从时间戳更新以来，它确实会重新呈现。

有人可以解释我为什么吗？

我有一个反应组件，用户可以在其中上传图像，并且他还显示了上传图像的预览。他可以通过单击图像对应的删除按钮来删除图像。我正在使用 react-dropzone 。这是代码：

class UploadImage extends React.Component {
  constructor(props) {
    super(props);
    this.onDrop = this.onDrop.bind(this);
    this.deleteImage = this.deleteImage.bind(this);
    this.state = {
      filesToBeSent: [],
      filesPreview: [],
      printCount: 10,
    };
  }

  onDrop(acceptedFiles, rejectedFiles) {
    const filesToBeSent = this.state.filesToBeSent;
    if (filesToBeSent.length < this.state.printCount) {
      this.setState(prevState => ({
        filesToBeSent: prevState.filesToBeSent.concat([{acceptedFiles}])
      }));
      console.log(filesToBeSent.length);
      for (var i in filesToBeSent) {
        console.log(filesToBeSent[i]);
        this.setState(prevState => ({
          filesPreview: prevState.filesPreview.concat([
            <div>
              <img src={filesToBeSent[i][0]}/>
              <Button variant="fab" aria-label="Delete" onClick={(e) => this.deleteImage(e,i)}>
                <DeleteIcon/>
              </Button>
            </div>
          ])
        }));
      }
    } else {
      alert("you have reached …